当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图表

回答

相关问题