動態更新Chart.js繪製折線圖數據集數據

Question

如何將檢索後的值傳回數據集數據？目前它的價值是空的。我知道由於數組的初始化var durationChartData返回空，我怎麼能更新它，並顯示正確的值後，我從ajax的價值？

var durationChartData = []; 
var lineChartData = { 
     labels: ["Jan","Feb", "Mar","Apr","May","Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
     datasets: [ 
      { 
       label: "My Second dataset", 
       fillColor: "rgba(124,181,236,0.4)", 
       strokeColor: "rgba(124,181,236,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [durationChartData[0],durationChartData[1],durationChartData[2],durationChartData[3],durationChartData[4],durationChartData[5],durationChartData[6],durationChartData[7],durationChartData[8],durationChartData[9],durationChartData[10],durationChartData[11]] 
      } 
     ] 
    }; 
window.onload = function(){ 
    $.ajax({ 
     url: '/rest/analytical/home/viewed/line', 
     type: 'GET', 
     dataType: 'json', 
     success: function (data) { 
      dataLength = (data + '').length; 
      for(var i=0; i<dataLength; i++){ 
      durationChartData[i] = data.ret[i].all; 
      } 
     }, 
     error: function (data) { 
      console.log('duration Chart Data: ' + data); 
     } 
    }); 

    var linegraph = document.getElementById("linegraph"); 
    var bargraph = document.getElementById("bargraph"); 

    if(linegraph !== null){ 
     var ctx = linegraph.getContext("2d"); 
     window.myLine = new Chart(ctx).Line(lineChartData, { 
      tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> min", 
      responsive: true 
     }); 
    }; 

Answer 1

更改來自Ajax響應接收數據集的一部分，然後調用圖表的update()功能。這是通過在$ .ajax成功函數結尾添加2行完成的。

$.ajax({ 
     url: '/rest/analytical/home/viewed/line', 
     type: 'GET', 
     dataType: 'json', 
     success: function (data) { 
      dataLength = (data + '').length; 
      for(var i=0; i<dataLength; i++){ 
      durationChartData[i] = data.ret[i].all; 
      } 

      window.myLine.data.datasets[0].data = durationChartData; 
      // 1.x compatible answer (comment out line above): 
      // for(i=0; i <durationChartData.length; i++) { 
      // window.myLine.datasets[0].points[i].value = durationChartData[i]; 
      // } 
      window.myLine.update();     
     }, 
     error: function (data) { 
      console.log('duration Chart Data: ' + data); 
     } 
    });