使用 Chart.js 创建多折线图

2022-01-22 00:00:00 line multiline charts javascript 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, 标签)

.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 个指向 same 对象 a 的指针.

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

小提琴 - http://jsfiddle.net/tk78bosy/

相关文章