使用Ajax自动更新Highcharts [英] Auto Update Highcharts with Ajax

问题描述

希望有人能帮到我。

我想用ajax的信息更新图表，我已经证实ajax是正确的格式等等，初始图形加载完美，但它似乎并没有正确更新。

我的代码：

  $（document）.ready（function（）{
 
 var options = {
图表：{
 renderTo： 'cpuhealth'，
 type：'column'
}，
 title：{
 text：'CPU Usage'
}，
 yAxis：{
标签：{
 formatter：function（）{
 return this.value +'％'; 
} 
}，
 title：{
文本：'用法（％）'
} 
}，
 xAxis：{
 title：{
 text：'CPU Core ID＃'
 } 
}，
 tooltip：{
 formatter：function（）{
 return'CPU Core：< b>'+ this.x +'< / b>< br>使用情况< b>'+ this.y +'％< / b>'; 
} 
}，
图例：{
启用：false 
}，
系列：[{}] 
}; 
 
 
 var chart; 
 $ .getJSON（'http：//url-to-json-file/index.php'，函数（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秒更新一次图表： / p>

任何帮助都将不胜感激，我对JS有了一个新手。

解决方案你有没有试过，

  events：{
 load：function（）{
 
 //设置每秒更新图表
 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 = {
图表：{
 renderTo：'cpuhealth'，
类型：'列'
}，
标题：{
 text：'CPU Usage '
}，
 events：{
 load：function（）{
 
 //设置每秒更新图表
 var series = this.series [0]; 
 setInterval（function（）{
 var chart = new Highcharts.Chart（options）; 
 $ .getJSON（'http：//url-to-json-file/index.php' ，函数（jsondata）{
 options.series [0] .data = JSON.parse（jsondata.cpu）; 
}）; 
}，5000）; 
} 
}，
 yAxis：{
 labels：{
 formatter：function（）{
 return this.value +'％'; 
} 
}，
标题：{
 text：'用法（％）'
} 
}，
 xAxis：{
 title：{
 text：'CPU Core ID＃'
} 
}，
 tooltip：{
 formatter：function（）{
 return 'CPU Core：< b>'+ this.x +'< / b>< br>用法< b>'+ this.y +'％< / b>'; 
} 
}，
图例：{
启用：false 
}，
系列：[{}] 
}; 
  

Hopefully somebody can be of help to me here.

I'm trying to update a graph with information from ajax, I've already confirmed that the ajax is of the correct format etc and the initial graph load works perfectly but it doesn't seem to update correctly.

My code:

$(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: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>';
            }
        },
        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);
});

The JSON is being pulled fine but it just isn't updating the chart every 5 seconds :(

Any help would be greatly appreciated, I'm abit of a novice with JS.

解决方案

Have you tried,

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

Then your chart data would be,

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: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>';
        }
    },
    legend: {
        enabled: false
    },
    series: [{}]
};

这篇关于使用Ajax自动更新Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！