在Chartjs中显示JSON数据

tmb3ates 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(219)

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

chart.js

来源：https://stackoverflow.com/questions/44990517/displaying-json-data-in-chartjs

2条答案

按热度按时间

bhmjp9jg1#

你构建图表的方法是完全不恰当的。下面是你应该遵循的正确方法：
第一个

赞(0）回复(0）举报 2022-11-06

8zzbczxx2#

我发现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循环

赞(0）回复(0）举报 2022-11-06

我来回答

在Chartjs中显示JSON数据

2条答案

相关问题

热门标签

最新问答