Question

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

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

CODE：

$(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);

Answer 2

您可以创建一个funcion getHighchart并将代码放入其中，而不是将您的Highchart脚本放在document.ready函数中。并依赖于您希望代码读取的秒数，如下所示，但您必须引用jquery js。

$(function () {
    setInterval(getHighChart, 30000); //30 seconds onload="getHighChart()" 
});

function getHighChart() {
    //to containe you script for loading the chart
}

在Highcharts中自动刷新Json数据

CODE：

2 个答案: