我正在尝试使用Chart JS创建一个表,其中包含来自我的JSON文件的动态生成的数据点。我的代码的逻辑如下:
var datapart;
for (i = 0; i < jsonfile.jsonarray.length; i++){
datapart += {
label: jsonfile.jsonarray[i].name,
data: [jsonfile.jsonarray[i].age]
};
}
var config = {
type: 'line',
data: {
labels: ["Graph Line"],
datasets: [datapart]
}
}
我的JSON文件看起来像这样:
{
"jsonarray": [
{
"name": "Joe",
"age": 12
},
{
"name": "Tom",
"age": 14
}
]
}
config
变量包含ChartJS的配置设置,包括设置数据点。加载到ChartJS时,config
提供显示我的图表所需的信息。
无论如何,我的想法是使用变量datapart
作为使用for循环附加数据集的方法。不幸的是,代码没有产生结果。我知道我添加变量的方法有问题,但我不确定如何继续。
我如何将这些JSON值添加到Chart.js?
答案 0 :(得分:23)
您构建图表的方法完全不合适。这是你应该遵循的正确方法:
var jsonfile = {
"jsonarray": [{
"name": "Joe",
"age": 12
}, {
"name": "Tom",
"age": 14
}]
};
var labels = jsonfile.jsonarray.map(function(e) {
return e.name;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.age;
});;
var ctx = canvas.getContext('2d');
var config = {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Graph Line',
data: data,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
}]
}
};
var chart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
答案 1 :(得分:0)
我发现Bear GRiZZLY XI提出的solution很有帮助。利用for ..循环。
假设您的api响应如下:
var markschart = document.getElementbyId("markschart");
{
"labels": "Maths,Geography,Physics,Chemistry,English,Biology,Music",
"datasets": [
{
"label": "Student 3",
"data": "120, 90, 45, 90, 14, 100, 88",
"spanGaps": false
},
{
"label": "Student 2",
"data": "150, 80, 99, 100, 90, 110, 97",
"spanGaps": false
},
{
"label": "Student 1",
"data": "140, 100, 89, 134, 120, 78, 56",
"spanGaps": false
}
]
}
在javascript中,您可以按以下方式处理响应(响应包含上述json数据包):
var mydatasets = [];
var colorslist = ["blue","orange","magenta","green","syrup","navy","bumblebee","turkish","army","ferrari"];
for(var j = 0; j < response.datasets.length; j++) {
mydatasets.push({label: response.datasets[j].label, boderColor: colorslist[j], data: response.datasets[j].data.splits(','), spanGraphs: true});
}
var subjectsData = {
labels: response.labels.split(','),
datasets: mydatasets
}
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Subject Perfomance',
fontSize: 14
}
}]
}
};
var studentsMarksPerformance = new Chart(markschart, {
type: "line",
data: subjectsData ,
options: options
});
以上并不是完整的解决方案,但可能有助于实现使用Chart.js创建折线图的for..each循环