當AJAX在我的頁面上更新我的數據時更新HighCharts圖表

我有一個頁面，其中有一些基於不同項目任務狀態的項目統計信息。在這個頁面上，我使用AJAX在他們改變時更新我的Stat值。當AJAX在我的頁面上更新我的數據時更新HighCharts圖表

我現在正在嘗試集成一個Highcharts條形圖/圖形，我需要更新它;當我的數據發生變化時，它會顯示圖表。

有一個的jsfiddle在這裏展示我與現在http://jsfiddle.net/jasondavis/9dr345og/1/

$(function() { 
    $('#container').highcharts({ 
     data: { 
      table: document.getElementById('datatable') 
     }, 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Project Stats' 
     }, 
     yAxis: { 
      allowDecimals: false, 
      title: { 
       text: 'Total' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + 
        this.point.y + ' ' + this.point.name.toLowerCase(); 
      } 
     }, 
     subtitle: { 
      enabled: true, 
      text: 'Project Stats' 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     } 

    }); 


    // Button Click to Simulate my Data updating. This increments the Completed Tasks bar by 1 on each click. 
    $(".update").click(function() { 
     var completedVal = $('#completed').text(); 
     ++completedVal 
     $('#completed').text(completedVal) 
    }); 

});

所以這個例子是從表中獲取數據的實驗圖表，但我沒有用這個方法，我還可以將其設置如果需要使用JavaScript。

我只需要弄清楚如何在飛行中更新所有這些值，因爲我的真實活動頁面使用AJAX更新了我的任務狀態值，因此我希望此圖表也可以進行實時更新。

有關如何更新的幫助？當我的AJAX代碼運行時，如果有重建圖表的函數，我可以在那裏調用一些JavaScript？

來源

2014-09-29 JasonDavis

我會放棄使用該表，特別是因爲它看起來像你正在建造它，只是爲了highcharts使用它。而是通過AJAX將您的數據作爲Highcharts series object返回。然後使用Series.setData方法更新您的圖。這將是正確的方式來做到這一點。

如果你真的想使用表格，你可以查詢數據並仍然使用setData（這就是Highcharts爲你做的事情）。更新了fiddle。

$(".update").click(function() { 
    var completedVal = $('#completed').text(); 
    ++completedVal; 
    $('#completed').text(completedVal); 
    // get y values 
    var yValues = $.map($('#datatable tr td'),function(i){return parseFloat($(i).text());}); 
    // set data 
    Highcharts.charts[0].series[0].setData(yValues);  
});

來源

2014-09-29 19:29:36 Mark

當AJAX在我的頁面上更新我的數據時更新HighCharts圖表

回答

相關問題