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函数内定义的另一个函数内运行。

如果要将两个图表相互叠加，请将其作为二维数组传递给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']

应包含所有图表标题（Humidity，Tempreture）和

      data_input[i]['data']

包含数据。我是每张图的编号。

希望这有帮助。

Highstock更新数据getJson

1 个答案: