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

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

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

如何从chart.js的html表中动态添加元素

并试过这个：

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 

Answer 2

创建服务以获取json formt，如：

 labels : ["January","February","March","April","May","June","July"], datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] }, { label: "My Second dataset", fillColor : "rgba(151,187,205,0.2)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] } ] 

然后添加以下javascript代码

 var j = []; $.ajax({ type: 'GET', url: 'http://' + window.location.host.toString() + "/path", dataType: 'json', success: function (data) { j = data; }, async: false }); var chartData = { labels: j.labels, datasets: j.datasets }; window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(chartData, { responsive: true, animation: true, tooltipFillColor: "rgba(0,0,0,0.8)", multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>" }); }