循环以在画布js中创建折线图

Question

我有一个数组对象：

  total = 
   [
    {
      date: 5/12/2017,
      count: 5,
      type: A
     },
     {
      date: 5/15/2017,
      count: 15,
      type: A
     },
     {
      date: 5/12/2017,
      count: 4,
      type: B
     },
     {
      date: 5/15/2017,
      count: 5,
      type: C
     }..
    ]

我想知道如何使用 CanvasJS 在折线图中循环它们，每条线表示每种类型，x 轴显示日期，y 轴显示计数

这是我到目前为止所拥有的：

     var chart = new CanvasJS.Chart("chartContainer",
        {
            title: {
                text: "My Counts"
            },
            axisX: {
                title: "Date",
            },
            axisY: {
                title: "Count"
            },
            data: []
           });

Answer 1

您可以在数组上运行 for 循环，并将 dataPoint 存储在不同的变量中，以便稍后在图表中使用它。

var dps1 = [];
var dps2 = [];
var dps3 = [];
for(var i = 0; i < total.length; i++) {
    if(total[i].type === "A") {
        dps1.push({x: new Date(total[i].date), y: total[i].count});
    } else if(total[i].type === "B") {
        dps2.push({x: new Date(total[i].date), y: total[i].count});
    } else if(total[i].type === "C") {
        dps3.push({x: new Date(total[i].date), y: total[i].count});
    }
}

存储数据点后，需要在图表中使用它。

data: [{
    type: "line",
    dataPoints: dps1
}, {
    type: "line",
    dataPoints: dps2
}, {
    type: "line",
    dataPoints: dps3
}]