使用 JSON 的 Highcharts Solid Gauge 动态更新

Question

已更新并解决，见下文。

我已经为此工作了几天，搜索和阅读了许多教程，但我仍然卡住了。最终，我正在处理一个页面，该页面将包含多个实心仪表图表，其中数据由 SQLITE3 数据库中的 JSON 提供。数据库每分钟更新一次，我希望动态更新图表数据，而不是通过刷新浏览器页面。

出于学习的目的，我将其缩减为一张图表。

所有当前和未来的数据都将这样排列：

PHP

[{"name":"s1_id","data":[684172]},
{"name":"s1_time","data":[1483097398000]},
{"name":"s1_probe_id","data":["28-0000071cba01"]},
{"name":"s1_temp_c","data":[22.125]},
{"name":"s1_temp_f","data":[71.825]},
{"name":"s2_id","data":[684171]},
{"name":"s2_time","data":[1483097397000]},
{"name":"s2_probe_id","data":["28-0000071d7153"]},
{"name":"s2_temp_c","data":[22.062]},
{"name":"s2_temp_f","data":[71.7116]}]

这是我的 java 的当前布局：

JS

    $(function() {
    var options = {
        chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            center: ['50%', '90%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        tooltip: {
            enabled: false
        },
        // the value axis
        yAxis: {
            stops: [
                [0.10, '#2b908f'],//Blue
                [0.35, '#55BF3B'],//Green
                [0.65, '#DDDF0D'],//Yellow
                [0.90, '#DF5353']//Red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 1000,
            tickWidth: 0,
            title: {
                y: -70
             },
            labels: {
                y: 16
            },
            min: 0,
            max: 1000000,
            title: {
         text: 'Degree C'
      }        
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: -10,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        series: []
};
    var gauge1;
    $.getJSON('sgt3.php', function(json){
    options.chart.renderTo = 'chart1';
    options.series.push(json[0]);
    gauge1 = new Highcharts.Chart(options);
    });
});

我使用了这篇文章中的信息，但它忽略了动态更新方面。正如我之前提到的，我将有更多图表呈现到 div id，所有这些都来自一个 JSON 数组，这就是我引用以下链接的原因：

Multiple dynamic Highcharts on one page with json

如果有人知道如何动态更新此内容，请告诉我。我尝试了几种 setInterval 方法，但它们似乎所做的只是重绘图表，但没有更新数据。

更新：

在回到这里之前，我花了一些时间进行更多迭代并解决了问题。我更改了每个仪表以具有自己的功能，例如：

    $('#gauge0').highcharts(Highcharts.merge(options, {
    yAxis: {
        min: 15,
        max: 30,
        tickPositions: [15, 20, 25, 30],
        title: {
            text: 'Table'
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        data: [30],
        dataLabels: {
            y: 20,
            format: '<div style="text-align:center"><span style="font-size:48px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.3f}</span><br/>' +
                    '<span style="font-size:12px;color:silver">Degree C</span></div>'
        },
        tooltip: {
            valueSuffix: 'Tooltip 1'
        }
    }]
}));

然后通过分别分配给每个仪表来使 setInterval 工作。我添加了比我引用的两个更多的信息，但每个 var 和 setData 都可以分别添加。

    // Bring life to the dials
setInterval(function() {
    $.ajax({
        url: 'data_temps.php',
        success: function(json) {
            var chart0 = $('#gauge0').highcharts();
            var chart1 = $('#gauge1').highcharts();

            // add the point
            chart0.series[0].setData(json[3]['data'],true);
            chart1.series[0].setData(json[8]['data'],true);
        },
         cache: false
    })
}, 1000)

希望这可以帮助将来的人。这可能不是最有效的方法，但它现在工作得很好。再次感谢大家的建议。

Answer 1

你可以试试这样的：

改变：

var gauge1;
$.getJSON('sgt3.php', function(json){
options.chart.renderTo = 'chart1';
options.series.push(json[0]);
gauge1 = new Highcharts.Chart(options);
});

到：

options.chart.renderTo = 'chart1';
var gauge1 = new Highcharts.Chart(options);

$.getJSON('sgt3.php', function(json){
    gauge1.series[0].points.length = 0;
    gauge1.series[0].points.push(json[0]);
});

也就是说，更新图表上的现有系列，而不是重新创建它。

正如我之前在评论中提到的，highcharts 提供了一个动态更新仪表的示例：

http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/