在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>