使用Ajax自动更新Highcharts

希望有人可以在这里帮助我。

我正在尝试使用来自ajax的信息更新图形，我已经确认ajax具有正确的格式等，并且初始图形加载完美但但似乎没有正确更新。

我的代码：

$(document).ready(function() { var options = { chart: { renderTo: 'cpuhealth', type: 'column' }, title: { text: 'CPU Usage' }, yAxis: { labels: { formatter: function() { return this.value + ' %'; } }, title: { text: 'Usage (%)' } }, xAxis: { title: { text: 'CPU Core ID#' } }, tooltip: { formatter: function() { return 'CPU Core: ' + this.x + '
Usage ' + this.y + '%'; } }, legend: { enabled: false }, series: [{}] }; var chart; $.getJSON('http://url-to-json-file/index.php', function(jsondata) { options.series[0].data = JSON.parse(jsondata.cpu); chart = new Highcharts.Chart(options); }); window.setInterval(function(){ var chart = new Highcharts.Chart(options); $.getJSON('http://url-to-json-file/index.php', function(jsondata) { options.series[0].data = JSON.parse(jsondata.cpu); }); }, 5000); }); 

JSON被拉得很好，但它不是每5秒更新一次图表:(

任何帮助将不胜感激，我是JS的新手。

Answer 1

你有没有尝试过，

  events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function(){ var chart = new Highcharts.Chart(options); $.getJSON('http://url-to-json-file/index.php', function(jsondata) { options.series[0].data = JSON.parse(jsondata.cpu); }); }, 5000); } } 

然后你的图表数据是，

 var options = { chart: { renderTo: 'cpuhealth', type: 'column' }, title: { text: 'CPU Usage' }, events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function(){ var chart = new Highcharts.Chart(options); $.getJSON('http://url-to-json-file/index.php', function(jsondata) { options.series[0].data = JSON.parse(jsondata.cpu); }); }, 5000); } }, yAxis: { labels: { formatter: function() { return this.value + ' %'; } }, title: { text: 'Usage (%)' } }, xAxis: { title: { text: 'CPU Core ID#' } }, tooltip: { formatter: function() { return 'CPU Core: ' + this.x + '
Usage ' + this.y + '%'; } }, legend: { enabled: false }, series: [{}] };