如何在 ZingChart 中为容器制作边框

Question

如何在 ZingChart 中围绕图表制作边框并在其上方制作标题栏。我尝试使用 plotarea 边框，但它围绕着图表而不是完整的图表。我想要黑色边框和标题，但我只能像这张图片那样制作红色边框。

这是代码

 {
"type":"bar",
"plotarea":{
  "border-color" : "#0ff",
  "border-width" : "2px"
},
"series":[
    {
        "values":[11,26,7,44,11]
    },
    {
        "values":[42,13,21,15,33]
    }
]

}

Answer 1

可以通过为不同 objects 的特定边使用边框属性来实现这种外观。在这种情况下，为图表的右侧和左侧以及标题的底部设置边框。

下面是一个示例，展示了这种方法的实际应用，其中包含供您在自己的代码中使用的关键部分。

var myConfig = {
  type: "bar",
  borderRight: "6px solid #000",
  borderLeft: "6px solid #000",
  borderBottom: "6px solid #000",
  title: {
    text: "My Title",
    height: 40,
    borderBottom: "6px solid #000" //needs to be added to title or will be hidden underneath
  },
 series : [
  {
   values : [35,42,67,89,25,34,67,85]
  }
 ]
};
 
zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 400, 
 width: 600 
});

<html>
 <head>
  <script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
  <script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
  ZC.LICENSE = ['569d52cefae586f634c54f86dc99e6a9','ee6b7db5b51705a13dc2339db3edaf6d'];</script>
 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

我是 ZingChart 团队的一员，如果您需要进一步说明或者这不是您想要的，请告诉我。

如何在 ZingChart 中为容器制作边框

How to make border for container in ZingChart

html

css

php

charts

zingchart