Highstock 更新数据 getJson

Question

我是 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 脚本。一个用于 [时间戳、温度]，另一个用于 [时间戳、湿度]。

我尝试了在这里找到的几个代码片段，但由于我不具备 Javascript 知识，因此无法根据需要进行更改。

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

提前致谢。

Answer 1

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

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

是一个很好的教程，可以帮助您了解它是如何完成的。我希望您可以利用目前的 javascript 知识休息一下。命名当前的两个函数，运行它在 setInterval 函数中定义的另一个函数中。

如果要绘制两个图表，请将其作为 two-D 数组传递给 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 是每个图表的编号。

希望对您有所帮助。

Highstock 更新数据 getJson

Highstock Update Data getJson

javascript

json

highstock