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

Answer 2

我發現 Bear GRiZZLY XI 提出的解決方案非常有幫助。 使用 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 循環