Question

我想使用带有ajax json数据的Chart.js来获取折线图。

基本上可以使用自定义数据，例如。 [176,617,930,606,649,0,0,0]。

但如果我尝试下面的话，我无法使用ajax json数据获取图表。

我的JSON数据

{'pvideo':[  {'DDATE':"2017-01","TOCDDB_VALUE":"DENY","CNT":"0"},  {'DDATE':"2017-01","TOCDDB_VALUE":"CRREQUEST","CNT":"176"}, {'DDATE':"2017-01","TOCDDB_VALUE":"NOCR","CNT":"0"}, {'DDATE':"2017-02","TOCDDB_VALUE":"DENY","CNT":"0"},  {'DDATE':"2017-02","TOCDDB_VALUE":"CRREQUEST","CNT":"617"},  {'DDATE':"2017-02","TOCDDB_VALUE":"NOCR","CNT":"0"},  {'DDATE':"2017-03","TOCDDB_VALUE":"DENY","CNT":"0"},  {'DDATE':"2017-03","TOCDDB_VALUE":"CRREQUEST","CNT":"930"},  {'DDATE':"2017-03","TOCDDB_VALUE":"NOCR","CNT":"0"},  {'DDATE':"2017-01","TOCDDB_VALUE":"SREG","CNT":"247"},  {'DDATE':"2017-02","TOCDDB_VALUE":"SREG","CNT":"94"},  {'DDATE':"2017-03","TOCDDB_VALUE":"SREG","CNT":"76"} ], ptrights:[  {'DDATE':"2017-01","TOCDDB_VALUE":"DENY","CNT":"0"},  {'DDATE':"2017-01","TOCDDB_VALUE":"CRREQUEST","CNT":"27"},  {'DDATE':"2017-01","TOCDDB_VALUE":"NOCR","CNT":"10"},  {'DDATE':"2017-02","TOCDDB_VALUE":"DENY","CNT":"3"},  {'DDATE':"2017-02","TOCDDB_VALUE":"CRREQUEST","CNT":"10"},  {'DDATE':"2017-02","TOCDDB_VALUE":"NOCR","CNT":"23"},  {'DDATE':"2017-03","TOCDDB_VALUE":"DENY","CNT":"0"},  {'DDATE':"2017-03","TOCDDB_VALUE":"CRREQUEST","CNT":"32"},  {'DDATE':"2017-03","TOCDDB_VALUE":"NOCR","CNT":"11"}]}

代码是

var crcnt = [];
var crcnt2 = [176,617,930,606,649,0,0,0];
var nocrcnt = [];
var denycnt = [];

$.getJSON(url, function(data) {
  // I use lodash.js for _.filter and ._map
  var crlist = _.filter(data.pvideo, function(o) { return o.TOCDDB_VALUE == 'CRREQUEST' });
  var nocrlist = _.filter(data.pvideo, function(o) { return o.TOCDDB_VALUE == 'NOCR' });
  var denylist = _.filter(data.pvideo, function(o) { return o.TOCDDB_VALUE == 'DENY' });

  var crcnt = _.map(crlist, "CNT");
  var nocrcnt = _.map(nocrlist, "CNT");
  var denycnt = _.map(denylist, "CNT");});


var canvas1 = new chart(doucment.getElementByID("canvas1"), {
  type: 'line',
  data: {
    labels: ["Jan", "Feb", "Mar","Apr", "May", "Jun", "Jul", "Aug"],
    datasets: [{
      label: "CRREQUEST",
      backgroundColor: "rgba(255, 99, 00, 0.31)",
      borderColor: "rgba(255, 99, 204, 0.7)",
      pointBorderColor: "rgba(255, 99, 99, 0.7)",
      pointBackgroundColor: "rgba(255, 33, 99, 0.7)",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      data: crcnt
    }, {

  label: "NOCR",
  backgroundColor: "rgba(204, 255, 255, 0.70)",
  borderColor: "rgba(99, 255, 255, 0.70)",
  pointBorderColor: "rgba(3, 88, 106, 0.70)",
  pointBackgroundColor: "rgba(0, 33, 255, 0.70)",
  pointHoverBackgroundColor: "#fff",
  pointHoverBorderColor: "rgba(151,187,205,1)",
  pointBorderWidth: 1,
  data: nocrcnt
}, {
  label: "DENY",
  backgroundColor: "rgba(75,192,192,0.4)",
  borderColor: "rgba(0,0,30,1)",
  pointBorderColor: "rgba(3, 88, 106, 0.70)",
  pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
  pointHoverBackgroundColor: "#fff",
  pointHoverBorderColor: "rgba(151,187,205,1)",
  pointBorderWidth: 1,
  data: denycnt
}]});

我通过chrome控制台检查了自定义数据和json数据是否相同。

Console Capture

使用带有ajax

0 个答案: