在Chart.js中使用JSON數據圖表

Question

我使用Chart.js和Tabletop創建折線圖。我已經到了某個地步，但不知道如何將Tabletop生成的JSON數據放入圖表。這是使用console.log(JSON.stringify(data));

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"}] 

我已經硬編碼的值到圖表所以你可以看到什麼，我想實現我的JSON輸出：

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

所以我需要通過數組，p作爲labels和Sessions作爲data。我確信這很簡單，但是我之前沒有使用過JSON，所以它讓我有點難過，沒有任何我嘗試似乎可以工作。

感謝所有幫助

Answer 1

嘗試斯普利特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);