highcharts - highcharts 使用 ajax 测量实时数据

Question

我在我的项目中使用了 highcharts库，我必须每 1 秒使用 PHP 文件创建的数据更新 Gauge。

highcharts Gauge Example 有一些代码让它每 1 秒触发一次，但我找不到像This Link这样的东西来使用 Ajax Technic 从 PHP 文件中获取数据。

任何人都知道实现这个场景并将 Ajax 应用于这个图表吗？

Answer 1

您没有找到示例，因为它是通用的，请查看如何使用$.post()：

http://jsfiddle.net/oceog/zpwdp/

$(function () {

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Speedometer'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 200,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]        
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }, 
    // Add some life
    function (chart) {
        setInterval(function () {
            $.post('/echo/json/',{
                   json: JSON.stringify({
                   //This is just a sample data, see comments after code to real world usage
                   inc: Math.round((Math.random() - 0.5) * 20)
                   })},
            function(data) {
            var point = chart.series[0].points[0],
                newVal,
                inc = data.inc;

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);
        },"json");
        }, 3000);
      });
    });​

在现实世界中，您使用类似

$.post('new_data.php',{last_time: last_time},function(data) { 
   //set point here

},"json")

在 new_data.php 你做类似的事情

$data=get_data($last_time);
echo json_encode($data);
exit;