在Chartjs中显示JSON数据

Question

我正在尝试使用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？

Answer 1

您构建图表的方法完全不合适.这是你应该遵循的正确方法:

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>