Question

我尝试将3个温度序列绘制到单个图表中。数据来自3个单独的JSON文件，格式为：

[
[1567529940953,43.4],
[1567530001644,43.3],
[1567530062503,43.4],
[1567530123220,43.4],
[1567530184116,43.4]
]

此外，JSON文件会定期更新，因此我希望图表在JSON文件每次更改时或每分钟左右更新一次。我研究了enablePolling，效果很好。

我已经尝试了很多，但是我有多个系列并且没有投票，或者我有一个系列并且没有投票。...

我能做的最好的事情是：

<script type="text/javascript">
        Highcharts.stockChart('container', {
            chart: {
                type: 'spline'
            },
            rangeSelector: {
                    selected: 2,
                    buttons: [{
                        type: 'hour',
                        count: 1,
                        text: '1h'
                    }, {
                        type: 'hour',
                        count: 12,
                        text: '12h'
                    }, {
                        type: 'all',
                        text: 'All'
                    }]
                },
            title: {
                text: 'Live Data (Rows JSON)'
            },
            yAxis: {
                    min: 15,
                    max: 50,
                    startOnTick: false,
                    endOnTick: false
                },

            subtitle: {
                text: 'Data input from a remote JSON file'
            },

            data: {
                rowsURL: window.location.origin + '/chart/terrarium_basking.json',
                firstRowAsNames: false,
                enablePolling: true
            }
        });
    </script>

我需要使用window.location.origin才能使其在我的网站上正常工作。不知道为什么www.reptile-addict.nl/chart/terrarium_basking.json无法正常工作？如果有帮助，其他JSON流是terrarium_ambient.json和terrarium_ceiling.json

编辑：认为我可以使用它..：）

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Highstock Example</title>

        <style type="text/css">

        </style>
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
        <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


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


        <script type="text/javascript">
            var seriesOptions = [],
                seriesCounter = 0,
                names = ['basking','ambient','ceiling'];

            /**
            * Create the chart when all data is loaded
            * @returns {undefined}
            */
            function createChart() {
                Highcharts.stockChart('container', {
                    series: seriesOptions
                });
            }

            function getJsonData() {
                        $.each(names, function (i, name) {

                        path = window.location.origin + '/chart/terrarium_' + name + '.json';

                        $.getJSON(path,    function (data) {
                            seriesOptions[i] = {
                                name: name,
                                data: data
                            };

                            // As we're loading the data asynchronously, we don't know what order it will arrive. So
                            // we keep a counter and create the chart when all the data is loaded.
                            seriesCounter += 1;

                            if (seriesCounter === names.length) {
                                createChart();
                                seriesCounter = 0;
                            }
                        });
                        });
            }

            getJsonData();

            setInterval( function(){ getJsonData(); }, 60000);
        </script>
    </body>
</html>

JSON的多个自动更新系列

0 个答案: