Javascript 如何为chart.js 折线图动态创建数据集？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26397009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create datasets dynamically for chart.js Line chart?
提问by Suresh
I want to create a Line chart with multiple datasets dynamically in the chart.js library.
我想在 chart.js 库中动态创建一个包含多个数据集的折线图。
I am able to assign the data dynamically. But I want to create the datasets itself dynamically. I saw the link below:
我能够动态分配数据。但我想动态创建数据集本身。我看到了下面的链接：
How to add the elements dynamically from the html table for chart.js
and tried this :
并尝试了这个：
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
}
Here the count value is 3 and I want to display the 3 lines in the chart and the count value will vary. Even though the chart line color and title will be the same, I want to display the line first and will change the rest once this is solved.
这里的计数值为 3，我想在图表中显示 3 条线，计数值会有所不同。即使图表线条颜色和标题相同，我也想先显示线条，一旦解决，将更改其余线条。
I tried to access the data like so :
我试图像这样访问数据：
alert("Datasets:"+mydata.datasets[0].data);
It should show the data of the first dataset but it's showing undefined.
它应该显示第一个数据集的数据，但它显示undefined.
However in the below case:
但是在以下情况下：
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);
I am able to get the data of first dataset. Could anyone please give me the solution?
我能够获得第一个数据集的数据。任何人都可以给我解决方案吗？
回答by Bear GRiZZLY Xi
I think you are looking for something like the following solution. http://jsfiddle.net/5m63232a/
我认为您正在寻找类似以下解决方案的东西。 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);
回答by Bhuwan Prasad Upadhyay
Create service to fetch json formt like :
创建服务以获取 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()]
}
]
Then add following javascript code
然后添加以下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 %>"
});
}
