ZingChart条形图没有被正确生成

HTML文件ZingChart条形图没有被正确生成

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

在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库。

来源

2016-11-18 piyush singh

什么是 “未格式” 对你意味着什么？数据绘制？酒吧的大小？刻度标签？请提供更多详细信息，因为我无法确定要解决的问题。 – nardecky

钢筋尺寸和x轴刻度标签。 –

您的条形图生成得很好。由于您正在绘制一个[[]]（数组数组），因此这些条从标签中脱离出来。如果你查看绘制的时间戳，那么在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({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"></div> 
 
\t </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({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"></div> 
 
\t </body> 
 
</html>

来源

2016-11-22 19:45:07 nardecky

谢谢，它工作正常。 –

ZingChart条形图没有被正确生成

回答

相关问题