динамически обновлять данные диаграммы диаграммы диаграммы Chart.js

Question

Как передать значение после извлечения в данные набора данных? В настоящее время это значение возвращает пустое значение. Я знаю, что var durationChartData return в пустом из-за инициализации массива пуст, как я могу его обновить и отобразить правильное значение после того, как я получил значение от 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() графика. Это делается с помощью 2 дополнительных строк в конце функции успеха $ .ajax.

$.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); 
     } 
    });