angularjs – ZingChart条形图未正确生成

发布时间：2020-12-17 17:32:04 所属栏目：安全来源：网络整理

导读：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 */

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属性显示标签的内容.您可以将步骤属性设置为更线性或使用缩放.

scale docs

token docs

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

zooming docs

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属性设置固定大小来避免这种情况.

plot docs

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!