javascript - 如何为 chart.js 折线图动态创建数据集？

Question

我想在 chart.js 库中动态创建包含多个数据集的折线图。

我能够动态分配数据。但我想动态创建数据集本身。我看到了下面的链接:

How to add the elements dynamically from the html table for chart.js

并尝试了这个:

var datasetValue = [];
for (var j = 0; j < count; j++) {
datasetValue[j] = [
{
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)' ,
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}]
}

var mydata = {
datasets : datasetValue
}

这里计数值为 3，我想在图表中显示 3 条线，计数值会有所不同。尽管图表线条颜色和标题相同，但我想先显示线条，并在解决后更改其余部分。

我尝试像这样访问数据:

alert("Datasets:"+mydata.datasets[0].data);

它应该显示第一个数据集的数据，但它显示的是 undefined。

但是在下面的情况下:

var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        data : [95,53,99,73,27,82,40],
        title : "2014"
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [35,43,59,31,50,66,55],
        title : "2013"
    }
 ]
}

alert("Datasets:"+mydata1.datasets[0].data);

我能够获取第一个数据集的数据。谁能给我解决方案？

Answer 1

我认为您正在寻找类似于以下解决方案的东西。 http://jsfiddle.net/5m63232a/

var datasetValue = [];
var count = 10;
for (var j=0; j<count; j++) {
    datasetValue[j] = {
        fillColor: 'rgba(220,220,220,0.5)',
        strokeColor :'rgba(220,220,220,1)',
        title :'2013',
        data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
    }
}
var mydata = {
    datasets : datasetValue
}
alert("Datasets: "+mydata.datasets[0].data);