Highstock 更新数据 getJson答案

【问题标题】：Highstock Update Data getJsonHighstock 更新数据 getJson
【发布时间】：2016-11-03 11:24:50
【问题描述】：

我是 Javascript 新手，并且可以使用以下代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Temperatur</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">

$(function () {

    $.getJSON('sqltojson.php', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector: {

                allButtonsEnabled: true,
                buttons: [{
                    type: 'minute',
                    count: 60,
                    text: 'hour',
                    dataGrouping: {
                        forced: true,
                        units: [['minute', [1]]]
                    }
                }, {
                    type: 'minute',
                    count: 360,
                    text: '6 hour',
                    dataGrouping: {
                        forced: true,
                        units: [['minute', [1]]]
                    }
                }, {
                    type: 'all',
                    text: 'all',
                    dataGrouping: {
                        forced: true,
                        units: [['minute', [1]]]
                    }
                }],
                buttonTheme: {
                    width: 60
                },
                selected: 0
            },

            title: {
                text: 'Temperatur'
            },

            series: [{
                name: 'Temperatur',
                type: 'spline',
                data: data,
                color: '#0000FF',
                tooltip: {
                    valueSuffix: '°C'
                }

            }]
        });
    });

});
$(function () {

    $.getJSON('sqltojson2.php', function (data) {
        // Create the chart
        $('#container2').highcharts('StockChart', {


            rangeSelector: {

                allButtonsEnabled: true,
                buttons: [{
                    type: 'minute',
                    count: 60,
                    text: 'hour',
                    dataGrouping: {
                        forced: true,
                        units: [['minute', [1]]]
                    }
                }, {
                    type: 'minute',
                    count: 360,
                    text: '6 hour',
                    dataGrouping: {
                        forced: true,
                        units: [['minute', [1]]]
                    }
                }, {
                    type: 'all',
                    text: 'all',
                    dataGrouping: {
                        forced: true,
                        units: [['minute', [1]]]
                    }
                }],
                buttonTheme: {
                    width: 60
                },
                selected: 0
            },

            title: {
                text: 'Luftfeuchte'
            },

            series: [{
                name: 'Luftfeuchte',
        type: 'spline',
                data: data,
                color: '#FF0000',
                tooltip: {
                    valueSuffix: '%'
                }
            }]
        });
    });

});
        </script>
    </head>
    <body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<div id="container2" style="height: 400px; min-width: 310px"></div>
    </body>
</html>

我现在想将这两个图表合并到一个图表中，并且它应该每分钟更新一次。目前我有两个 php 脚本。一个用于[时间戳，温度]，一个用于[时间戳，湿度]。

我尝试了几个在这里找到的 Code sn-ps，但由于我不具备 Javascript 知识，我无法将其更改为我的需要。

谁能给我一个提示我应该尝试什么，或者我可以在哪里找到解释我必须做什么的东西？

提前谢谢你。

【问题讨论】：

标签： javascript json highstock

【解决方案1】：

使用 setInterval() 在您选择的每个时间间隔运行您的 javascript。

http://www.w3schools.com/jsref/met_win_setinterval.asp

是一个很好的教程来了解它是如何完成的。我希望你能从你目前的 javascript 知识中得到休息。命名当前的两个函数，在 setInterval 函数中定义的另一个函数中运行它。

如果您想在彼此的顶部绘制两个图表，请将其作为二维数组传递给 HighChart。 http://www.highcharts.com/demo 包含大量示例，您可以参考。

例如，将数组传递给包含绘制图形的代码的函数，然后使用该变量为系列赋值。

function draw_first_chart(div_id,x_axis,data_input)
{
    $(div_id).highcharts({
        chart: {
        // ..//
    },
        title: {
            // ..//
        },

        xAxis: {
            // ..//
            },
            categories: x_axis
        },
        yAxis: {
            // ..//

        },
        tooltip: {
           // ..//
        },
        legend: {
            // ..//
        },
        series: data_input

    });

这里，如果要在 x 轴上显示有限值，请将数组发送到变量 x_axis 并将其他数据作为数组发送到 data_input。如果不只是忽略变量 x_axis 并将数组传递给 data_input。确保在

      data_input[i]['name']

应包含所有图表标题（湿度、温度）和

      data_input[i]['data']

包含数据。 i 是每个图的编号。

希望这会有所帮助。

【讨论】：