在 Chartjs 中显示 JSON 数据答案

【问题标题】：Displaying JSON data in Chartjs在 Chartjs 中显示 JSON 数据
【发布时间】：2018-11-30 23:11:09
【问题描述】：

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

【问题讨论】：

标签： javascript json chart.js

【解决方案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>

【讨论】：

谢谢！包含我的数据的更好方法。我现在唯一遇到的问题是，当我希望我列表中的两个人都被分成他们自己的数据集时，它会打印为一个数据集。
你确定吗？因为那看起来像this。这个^^是一般的方式。
是的，这就是我更喜欢的格式。只有我想弄清楚如何根据我名单上的人动态地制作每个数据集。
搞清楚了！基本上从这个答案中得到了提示stackoverflow.com/questions/26397009/…
这种方法的一个特点是您最终会循环两次数据。在一个 for 循环中完成它更有效

【解决方案2】：

我发现 Bear GRiZZLY XI 提出的solution 很有帮助。利用 for.. 循环。

假设您的 api 有一个 json 响应，如下所示：

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 循环

【讨论】：