gpt4 book ai didi

angularjs - ZingChart 条形图未正确生成

转载 作者:行者123 更新时间:2023-12-05 00:17:13 26 4
gpt4 key购买 nike

html file


<zingchart id="timesheet-bar-chart" zc-json="myObj"></zingchart>

in controller.js


$scope.myObj = {
"type": "bar",
"utc": true,
"plotarea":{
"margin":'dynamic'
},
"plot":{
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scaleX":{
"transform":{
"type":"date",
"all":"%d %M",
"item": {
"visible":false
}
},
},
"series":[{
"values": $scope.barValues,
"backgroundColor":"#f15662"
}]
};
zingchart.render({
id : 'timesheet-bar-chart',
height: 400,
width: "100%"
});

在 $scope.barValues 数据以下面的格式动态添加

[[[1478025000000,10],[1477938600000,20],[1478889000000,30]]]



我没有得到我犯任何错误的地方。生成的条形不符合格式。请帮助我,我是第一次使用 ZingChart 库。
enter image description here

最佳答案

您的条形图生成得很好。由于您正在绘制 [[]],所以条形图从标签上看不出来。 (数组数组)。如果您查看绘制的时间戳,则条形图确实不是在 11 月 4 日准确绘制的。如果您指的是标签本身,您可以通过 all 确定标签显示的内容。属性。您可以设置 step属性更线性或使用缩放。

scale docs

token docs

条形偏移是非线性数据的产物。由于非线性数据,条形尺寸现在也被压缩得更小。这是由于随着时间的推移大小。您可以通过添加 zooming 来查看(单击并拖动以缩放)条形将增加大小。

zooming docs

var myConfig = {
"type": "bar",
"utc": true,
"plotarea":{
"margin":'dynamic'
},
"plot":{
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scaleX":{
"zooming":true,
"transform":{
"type":"date",
"all":"%d %M %Y<br> %h:%i:%s",
},
},
"series":[{
"values": [[1478025000000,10],[1477938600000,20],[1478889000000,30]],
"backgroundColor":"#f15662"
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>


您可以通过使用 bar-width 设置固定大小来避免这种情况。属性。

plot docs

var myConfig = {
"type": "bar",
"utc": true,
"plotarea":{
"margin":'dynamic'
},
"plot":{
"bar-width": 30,
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scaleX":{
"zooming":true,
"transform":{
"type":"date",
"all":"%d %M %Y<br> %h:%i:%s",
},
},
"series":[{
"values": [[1478025000000,10],[1477938600000,20],[1478889000000,30]],
"backgroundColor":"#f15662"
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>

关于angularjs - ZingChart 条形图未正确生成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40672602/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com