javascript - 在 Highcharts 中自动刷新 Json 数据

Question

过去 4 天我一直在处理这个问题，但仍然可以弄清楚如何解决这个问题:

1. 数据库中的数据每 5 分钟更改一次。
2. 我想在新图表中显示数据而不刷新整个页面。

代码:

$(function () {
    $(document).ready(function() {
        $.getJSON("test2.php", function(json) {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            $('#container').highcharts({
                renderTo: 'container',
                defaultSeriesType: 'spline',
                chart: {
                    type: 'area',
                },
                title: {
                    text: 'Transaction Count'
                },
                subtitle: {
                    text: '5 Minutes Count'
                },
                exporting: { 
                    enabled: false 
                },
                xAxis: {
                    categories:json,
                    title:{
                        text: 'Time Of The Day',
                        style: {
                            color: '#666666',
                                fontSize: '12px',
                                fontWeight: 'normal'
                            }
                        },
                        tickInterval: 4,
                        type: 'datetime',
                        labels: {
                            style: {
                                fontFamily: 'Tahoma'
                            },
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Number Of Transaction'
                        },
                        labels: {
                            formatter: function () {
                                return this.value;
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y:,.0f}</b>'
                    },
                    plotOptions: {
                        column: {colorByPoint: true},
                        area: {
                            marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                colors: [
                    'green',  //Buy
                    '#4572A7' //Paid
                ],
                series: json
            });
        });
    });
});

Answer 1

您可以像这样更改数据集:

$('#container').highcharts().series[0].setData([129.2,144.0,...], false);

你可以重绘，像这样:

$('#container').highcharts().redraw();

因此，您需要做的是创建一个函数，(1) 首先从服务器获取数据，(2) 然后更新数据，(3) 然后重绘，如下所示:

var updateChart = function() {
    $.getJSON('test2.json', function(data) {
        var chart = $('#container').highcharts();
        $.each(data, function(pos, serie) {
            chart.series[pos].setData(serie, false);
        });
        chart.redraw();
    });
}

要每 5 分钟重复一次，您可以使用 setInterval，如下所示:

setInterval(function() {
    $.getJSON('test2.json', function(data) {
        var chart = $('#container').highcharts();
        $.each(data, function(pos, serie) {
            chart.series[pos].setData(serie, false);
        });
        chart.redraw();
    });
}, 300000);