使用Chart.js创建多线图 [英] create a multi line chart using Chart.js

问题描述

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

I am trying to create a multiline chart using Chart.js

我可以为1行做这个，我可以使用固定数据结构做2行但是我无法获得多行来显示传递给数据结构的数据。

I can do this for 1 line and i can do 2 lines using a fixed data structure but I cannot get multiple lines to display data passed to the data structure.

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

here is the example usage abbreviated from chart.js website

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

the chart always displays the same last generated line 4 times.

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

I am new to javascript and I am sure i am doing something wrong with the object structure creation, I have spent a day trying to work this out

有一个chart.js选项可以按如下方式添加值，如果我使用这个

there is a chart.js option to add values as follows, should I be using this

.addData（valuesArray，label）

.addData( valuesArray, label )

推荐答案

您正在创建在数据集的所有4个位置插入相同的对象（数据集）。因此，循环中的任何操作都在所有数组元素上完成（实际上，更准确地说，它是在数据集上完成的，数据集在数组的所有4个索引处都存在）

You were creating inserting the same object (dataset) at all 4 locations of the dataset. So any manipulations in the loop are being done on all of the array elements (actually it would be more accurate to say that it's being done on dataset and that dataset is there at all 4 indices of the array)

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

Notice that in the following code the {} object literal is actually being inserted 4 times into the array giving you a fresh element each time.

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,
// });

我还为你的标签做了一些小改动 - 你只需要一套标签。

I also made a small change for your labels - you just need 1 set of labels.

为了进行类比，原始代码正在执行此操作

To draw an analogy, the original code was doing this

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

最后你基本上有一个数组有4个指针指向相同对象 a 。

At the end of this you basically have an array with 4 pointers to the same object a.

小提琴 - http://jsfiddle.net/2Ld6d5op/

这篇关于使用Chart.js创建多线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！