javascript - 使用 Chart.js 创建多折线图

Question

我正在尝试使用 Chart.js 创建多线图表

我可以为 1 行执行此操作，我可以使用固定数据结构执行 2 行，但我无法获得多行来显示传递给数据结构的数据。

这里是 chart.js 网站的示例用法

http://www.chartjs.org/docs/#getting-started

  var myLineChart = new Chart(ctx).Line(data);
  var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {fillColor: "rgba(220,220,220,0.2)",
           strokeColor: "rgba(220,220,220,1)",
           data: [65, 59, 80, 81, 56, 55, 40]
          },
          {fillColor: "rgba(151,187,205,0.2)",
           strokeColor: "rgba(151,187,205,1)",
           data: [28, 48, 40, 19, 86, 27, 90]
          }
      ]};

现在我的代码，

   lineChartData = {};             //declare an object
   lineChartData.labels  = [];    //add 'labels' element to object (X axis)
   lineChartData.datasets = [];  //add 'datasets' array element to object

        dataset = {};       //a single dataset is an object
           dataset.fillColor = "rgba(0,0,0,0)";    
           dataset.strokeColor = "rgba(200,200,200,1)";  
           dataset.data = [];  //contains the 'Y; axis data

 for (line = 0; line < 4; line++) {
       y = [];
       lineChartData.datasets.push(dataset); //create a new line dataset

     for (x = 0; x < 10; x++) {
       y.push(line + x); //push some data aka generate 4 distinct separate lines
       lineChartData.labels += x; //adds x axis labels
     } //for x

      lineChartData.datasets[line].data = y; //send new line data to dataset
 } //for line

        ctx = document.getElementById("Chart1").getContext("2d");
        myLineChart = new Chart(ctx).Line(lineChartData);
    }

图表始终显示同一条最后生成的线 4 次。

我是 javascript 的新手，我确信我在对象结构创建方面做错了，我花了一天时间试图解决这个问题

有一个 chart.js 选项可以按如下方式添加值，我应该使用它吗

.addData( 值数组, 标签)

Answer 1

您正在创建在数据集的所有 4 个位置插入相同的对象(数据集)。所以循环中的任何操作都在所有数组元素上完成(实际上更准确地说它在数据集上完成并且该数据集在数组的所有 4 个索引中都存在)

请注意，在以下代码中，{} 对象文字实际上被插入数组中 4 次，每次都为您提供一个新元素。

lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object

for (line = 0; line < 4; line++) {
    y = [];
    lineChartData.datasets.push({}); //create a new line dataset
    dataset = lineChartData.datasets[line]
    dataset.fillColor = "rgba(0,0,0,0)";
    dataset.strokeColor = "rgba(200,200,200,1)";
    dataset.data = []; //contains the 'Y; axis data

    for (x = 0; x < 10; x++) {
        y.push(line + x); //push some data aka generate 4 distinct separate lines
        if (line === 0)
            lineChartData.labels.push(x); //adds x axis labels
    } //for x

    lineChartData.datasets[line].data = y; //send new line data to dataset
} //for line

ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);

// for chart.js 2.0 the following will be to create `myLineChart`
// myLineChart = new Chart(ctx1, {
//      type: 'line',
//      data: lineChartData,
// });

我还对您的标签做了一个小改动 - 您只需要一套标签。

打个比方，原来的代码是这样做的

Series a = new Series()
Array chartData = []
for (var i = 0; i < 4; i++) {
    chartData.add(a);
    -- some modifications on a ---
}

最后，您基本上得到了一个数组，其中包含 4 个指向相同 对象 a 的指针。

fiddle - http://jsfiddle.net/tk78bosy/