Chart.js線グラフデータセットデータを動的に更新

Question

取得した値をデータセットデータに戻すにはどうすればよいですか？現在のところ、値は空です。私はvarの期間を知っている空の配列の初期化のため空の戻り値は、私はそれを更新し、私は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); 
     } 
    });