Question

更新＆amp;已解决，见下文。

我已经在这方面工作了好几天，搜索和阅读了很多教程，但我仍然陷入困境。最后，我正在开发一个页面，其中包含多个实心仪表图表，其中包含JSON从SQLITE3数据库提供的数据。数据库每分钟更新一次，我希望动态更新图表数据，而不是刷新浏览器页面。

为了我的学习目的，我把它减少到一个图表。

所有当前和未来的数据将按此安排：

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/

使用JSON的Highcharts Solid Gauge动态更新

更新

1 个答案: