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

我想在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
}

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

未定义的

但在以下情况下：

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);

---

我能够得到第一个数据集的数据。谁能给我一个解决方案吗？

我想你正在寻找类似于以下解决方案的解决方案。

var-datasetValue=[]；
var计数=10；
对于（var j=0；j创建服务以获取json格式，如：

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 %>"
     });
 }

var j=[]；
$.ajax({
键入：“GET”，
url:'http://'+window.location.host.toString（）+“/path”，
数据类型：“json”，
成功：功能（数据）{
j=数据；
},
异步：false
});
var图表数据={
标签：j.labels，
数据集：j.数据集
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx）.Line（图表数据{
回答：是的，
动画：没错，
工具提示FillColor:“rgba（0,0,0,0.8）”，
多工具模板：“-”
});
}
 Hig熊灰熊席，我现在得到了这个解决方案非常非常感谢你的快速回复。@ SuReh关心分享解决方案你得到了吗？
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()]
            }
        ]  

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 %>"
     });
 }