ZingChart 条形图未正确生成

Question

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

Answer 1

您的条形图生成得很好。因为您正在绘制 [[]]（数组的数组），所以条形图从标签上看不出来。如果您查看绘制的时间戳，则条形图确实没有准确绘制在 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>

ZingChart 条形图未正确生成

ZingChart bar chart is not generating correctly

charts

angularjs

zingchart