在Chartjs中显示JSON数据

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

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>

以上是 在Chartjs中显示JSON数据 的全部内容， 来源链接： utcz.com/qa/421732.html

回到顶部