在 Chart.js 图表中使用 JSON 数据答案

【问题标题】：Use JSON data in Chart.js chart在 Chart.js 图表中使用 JSON 数据
【发布时间】：2016-06-09 10:00:50
【问题描述】：

我正在使用 Chart.js 和 Tabletop 创建折线图。我已经到了一定程度，但不确定如何将 Tabletop 生成的 JSON 数据放入图表中。这是我使用 console.log(JSON.stringify(data)); 的 JSON 输出

JSON

[{"Date":"2016-05-09","Sessions":"295"},{"Date":"2016-05-10","Sessions":"308"},{"Date":"2016-05-11","Sessions":"288"},{"Date":"2016-05-12","Sessions":"253"},{"Date":"2016-05-13","Sessions":"261"},{"Date":"2016-05-14","Sessions":"222"},{"Date":"2016-05-15","Sessions":"298"},{"Date":"2016-05-16","Sessions":"363"},{"Date":"2016-05-17","Sessions":"328"},{"Date":"2016-05-18","Sessions":"356"},{"Date":"2016-05-19","Sessions":"321"},{"Date":"2016-05-20","Sessions":"287"},{"Date":"2016-05-21","Sessions":"371"},{"Date":"2016-05-22","Sessions":"328"},{"Date":"2016-05-23","Sessions":"310"},{"Date":"2016-05-24","Sessions":"515"},{"Date":"2016-05-25","Sessions":"465"},{"Date":"2016-05-26","Sessions":"354"},{"Date":"2016-05-27","Sessions":"330"},{"Date":"2016-05-28","Sessions":"298"},{"Date":"2016-05-29","Sessions":"295"},{"Date":"2016-05-30","Sessions":"365"},{"Date":"2016-05-31","Sessions":"425"},{"Date":"2016-06-01","Sessions":"449"},{"Date":"2016-06-02","Sessions":"326"},{"Date":"2016-06-03","Sessions":"318"},{"Date":"2016-06-04","Sessions":"279"},{"Date":"2016-06-05","Sessions":"253"},{"Date":"2016-06-06","Sessions":"369"},{"Date":"2016-06-07","Sessions":"331"}]

我已将值硬编码到图表中，因此您可以看到我想要实现的目标：

图表 JAVASCRIPT

<script>
var ctx = document.getElementById("myChart");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: ["2016-05-09","2016-05-10","2016-05-11","2016-05-12","2016-05-13","2016-05-14","2016-05-15","2016-05-16","2016-05-17","2016-05-18","2016-05-19","2016-05-20","2016-05-21","2016-05-22","2016-05-23","2016-05-24","2016-05-25","2016-05-26","2016-05-27","2016-05-28","2016-05-29","2016-05-30","2016-05-31","2016-06-01","2016-06-02","2016-06-03","2016-06-04","2016-06-05","2016-06-06","2016-06-07"],
    datasets: [
        {
            label: "Sessions",
            fill: true,
            lineTension: 0.4,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'round',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'round',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [295,308,288,253,261,222,298,363,328,356,321,287,371,328,310,515,465,354,330,298,295,365,425,449,326,318,279,253,369,331],
        }
    ]
},
options: {
  legend: {
    display: false
  },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
</script>

所以我需要处理数组，将Date 拉入labels，将Sessions 拉入data。我确信这很简单，但我之前没有使用过 JSON，所以它让我有点难过，我尝试的任何方法似乎都不起作用。

感谢您的帮助

【问题讨论】：

标签： javascript json chart.js

【解决方案1】：

试试这个 Split Json 到 2 个不同的数组，并在 chart.js 中使用该数据

var arr = [{"Date":"2016-05-09","Sessions":"295"},{"Date":"2016-05-10","Sessions":"308"},{"Date":"2016-05-11","Sessions":"288"},{"Date":"2016-05-12","Sessions":"253"},{"Date":"2016-05-13","Sessions":"261"},{"Date":"2016-05-14","Sessions":"222"},{"Date":"2016-05-15","Sessions":"298"},{"Date":"2016-05-16","Sessions":"363"},{"Date":"2016-05-17","Sessions":"328"},{"Date":"2016-05-18","Sessions":"356"},{"Date":"2016-05-19","Sessions":"321"},{"Date":"2016-05-20","Sessions":"287"},{"Date":"2016-05-21","Sessions":"371"},{"Date":"2016-05-22","Sessions":"328"},{"Date":"2016-05-23","Sessions":"310"},{"Date":"2016-05-24","Sessions":"515"},{"Date":"2016-05-25","Sessions":"465"},{"Date":"2016-05-26","Sessions":"354"},{"Date":"2016-05-27","Sessions":"330"},{"Date":"2016-05-28","Sessions":"298"},{"Date":"2016-05-29","Sessions":"295"},{"Date":"2016-05-30","Sessions":"365"},{"Date":"2016-05-31","Sessions":"425"},{"Date":"2016-06-01","Sessions":"449"},{"Date":"2016-06-02","Sessions":"326"},{"Date":"2016-06-03","Sessions":"318"},{"Date":"2016-06-04","Sessions":"279"},{"Date":"2016-06-05","Sessions":"253"},{"Date":"2016-06-06","Sessions":"369"},{"Date":"2016-06-07","Sessions":"331"}]


var dateArr = [];
var sessionArr = [];

for (i=0;i<arr.length;i++) {
  for (n in arr[i]) {
    if (n == 'Date') {
      dateArr.push(arr[i][n]); 
    } else {
      sessionArr.push(arr[i][n]);
    }
  }
}
console.log(dateArr);
console.log(sessionArr);

【讨论】：