Question

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

我正在尝试使用来自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: <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);
});

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

使用Ajax自动更新Highcharts

1 个答案: