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]]]
解决方法
你的条形图生成得很好.条形图从标签上看是因为您正在绘制[[]](数组数组).如果您查看绘制的时间戳,则确实没有在11月4日准确绘制条形图.如果您要引用标签本身,则可以确定all属性显示标签的内容.您可以将步骤属性设置为更线性或使用缩放.
条形偏移是非线性数据的乘积.由于非线性数据,条形尺寸现在被挤压得更小.这是由于尺寸随着时间的推移.您可以通过添加缩放(单击并拖动以缩放)来查看条形将增加大小.
var myConfig = {
"type": "bar","scaleX":{
"zooming":true,"transform":{
"type":"date","all":"%d %M %Y<br> %h:%i:%s","series":[{
"values": [[1478025000000,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属性设置固定大小来避免这种情况.
var myConfig = {
"type": "bar","plot":{
"bar-width": 30,"stacked":true,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>
