来自JSON的多个自动更新系列_Json_Highcharts

来自JSON的多个自动更新系列

json highcharts

来自JSON的多个自动更新系列,json,highcharts,Json,Highcharts,我试着将3个温度系列绘制成一个单独的海图。数据来自3个单独的JSON文件，格式如下： [ [1567529940953,43.4], [1567530001644,43.3], [1567530062503,43.4], [1567530123220,43.4], [1567530184116,43.4] ] 此外，JSON文件会定期更新，因此我希望图表在每次JSON文件更改时或每分钟左右更新一次。我研究了enablePolling，结果非常理想我已经尝试了很多，但或者我有多个系列，没有

我试着将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>


Highcharts.stockChart（‘容器’{
图表：{
类型：“样条线”
},
范围选择器：{
选定：2，
按钮：[{
键入：“小时”，
计数：1，
文本：“1h”
}, {
键入：“小时”，
计数：12，
文字：“12小时”
}, {
键入：“全部”，
文字：“全部”
}]
},
标题：{
文本：“实时数据（JSON行）”
},
亚克斯：{
分钟:15,，
最高：50，
startOnTick：错，
endOnTick:错误
},
副标题:{
文本：“来自远程JSON文件的数据输入”
},
数据：{
rowsURL:window.location.origin+'/chart/terrarium_basking.json'，
firstRowAsNames:false，
enablePolling:true
}
});

我需要使用window.location.origin才能在我的网站上运行。不知道为什么www.gradive-addict.nl/chart/terarium_basking.json不起作用！？如果有帮助，其他JSON流是terrarium_ambient.JSON和terrarium_天花.JSON

编辑：我想我成功了……）


Highstock示例
var系列选项=[]，
序列计数器=0，
名称=[‘日光浴’、‘环境光’、‘天花板’]；
/**
*在加载所有数据时创建图表
*@returns{undefined}
*/
函数createChart（）{
Highcharts.stockChart（‘容器’{
系列：系列选项
});
}
函数getJsonData（）{
$.each（名称、函数（i、名称）{
path=window.location.origin+'/chart/terrarium_'+name+'.json'；
$.getJSON（路径、函数（数据）{
系列选项[i]={
姓名:姓名,，
数据：数据
};
//当我们异步加载数据时，我们不知道数据的到达顺序
//我们保留一个计数器，并在加载所有数据时创建图表。
序列计数器+=1；
if（serieCounter==names.length）{
createChart（）；
序列计数器=0；
}
});
});
}
getJsonData（）；
setInterval（函数（）{getJsonData（）；}，60000）；

您能否在JSFIDLE这样的在线代码编辑器中重现该问题？尽量简化图表，并使用与动态数据结构相同的静态数据（使用setTimeout生成假动态数据）。基本上就是这个示例，但有多个外部json文件轮询：Ok，但这个示例工作得很好，不存在您的问题。加载新JSON时，只需更新图表，无需使用

data.rowsURL

。它显示了我试图实现的目标，但它使用单个JSON创建单个序列。我希望在一个图表中有多个JSON，并且具有单独的系列。你说：“你可以在加载新的JSON时更新图表，而不需要使用data.rowsURL”，但我不知道如何做到这一点：（至少不需要在浏览器中重新加载整个页面。我想我知道了。我正在使用setInterval（）每分钟重新生成图表。有更好的解决方案吗？

<!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>