HighStock/HighCharts 从 JSON 动态添加点到系列（事件）

Question

我有一个 Highstock 图表来显示来自多个 JSON 源的温度数据。该页面是使用比较多个系列演示文件构建的。

我现在尝试使用事件向系列动态添加数据，但它似乎从未被调用或没有按照我的期望/希望正在做的事情:(

我的代码如下所示：

var seriesOptions = [],
			seriesCounter = 0,
			names = ['Temperature',  'Humidity'];


			var chart; // global        
			function requestData() {
				
				

				$.getJSON('JSON/new_Temperature.json', 
					function(point){

					var series = this.series[0];

					// add the point

					series.addPoint(point);

					// call it again after one second

					setInterval(requestData, 3000); 

				}); 
			}

			/**
			* Create the chart when all data is loaded
			* @returns {undefined}
			*/
			function createChart() {

				Highcharts.stockChart('container', {
					events: {
            			load: requestData
					},
					rangeSelector: {
						selected: 1,
						buttons: [{
							type: 'hour',
							count: 1,
							text: '1h'
						}, {
							type: 'minute',
							count: 5,
							text: '5minutes'
						}]
					},
					series: seriesOptions
				});
			}

			function success(data) {
				var name = this.url.match(/(Temperature|Humidity)/)[0];
				var i = names.indexOf(name);

				seriesOptions[i] = {
							name: name,
							data: data,
							type: 'spline'
							}; 

				seriesCounter += 1;

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

			Highcharts.getJSON(
				'JSON/Temperature.json',
				success
			);
			Highcharts.getJSON(
				'JSON/Humidity.json',
				success
			);

		<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>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/highcharts-more.js"></script>

		<script src="https://code.highcharts.com/js/themes/gray.js"></script>

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

当我添加上面的 sn-p 时，它在第 14 行给了我一个错误，即var series = this.series[0];，所以我想我在那里做错了什么？但我不知道是什么...

使用的 JSON 文件包含如下数据：

[[1578508367000,33.8],[1578508491000,33.8],[1578508506000,33.8],[1578508523000,33.8],[1578508539000,33.8],[1578508554000,33.8],[1578508570000,33.8],[1578508586000,33.8],[1578508602000,33.8],[1578508619000,33.8],[1578508635000,33.8],[1578508652000,33.8],[1578508668000,33.9],[1578508683000,33.8],[1578508699000,33.8],[1578508715000,33.8],[1578508731000,33.8],[1578508746000,33.8],[1578508762000,33.8],[1578508778000,33.8],[1578508795000,33.8],[1578508811000,33.8],[1578508827000,33.8],[1578508843000,33.8],[1578508860000,33.8],[1578508876000,33.8],[1578508892000,33.8],[1578508908000,33.8],[1578508923000,33.8],[1578508939000,33.8],[1578508955000,33.8]]

而我用来插入点的 JSON 只包含最新的值：[[1578508367000,33.8]]

我想我需要多次调用 requestData() 内的 getJSON ！？每个系列一个。

目前我使用 setInterval 但有没有办法在 JSON 被刷新/覆盖时做到这一点？

提前感谢您帮助我。

编辑：回应 Sebastian Wędzel，因为我的意图可能并不完全清楚 :)

我试图做的是以下。我有 4 个 json 文件，其中 2 个包含过去几天的温度/湿度值，其中 2 个仅包含最新测量值。我有一个 PHP 脚本定期更新所有 4 个。 当我的页面加载时，它将 2 个大 json 文件作为单独的系列加载到图表中。加载图表后，我希望它定期将新测量值添加到图表中，而无需重新加载整个页面。 它实际上类似于这个例子：Live data from dynamic CSV 但我使用的是 JSON（虽然 CSV 是可能的）并且我需要多个系列。这两个我都没有使用那个 CSV 示例。

Answer 1

1. 我收到了 Highcharts 错误 #16，因为在您的 html 中添加了 Highcharts 和 Highstock 脚本。

https://www.highcharts.com/errors/16/

1. 请注意，requestData 函数中的 this 指向 getJSON 功能，而不是图表对象 - 这意味着 this.series 未定义。

我假设用于温度和湿度的 getJSON 可以正常工作，并且图表已初始化，现在我不确定您是否要将整个数据添加到现有数据或从获取的数据中逐个添加点。

• 以下是逐个添加点的方法：

演示：https://jsfiddle.net/BlackLabel/s0o1gL3z/

function requestData() {

  $.getJSON('https://api.myjson.com/bins/qhene',
    function(data) {

      var series = chart.series[0],
        i = 0;

      // add the point
      function addPointToSeries() {
        series.addPoint(data[i]);
        i++;
        if (i === data.length) {
          clearInterval(addPoints)
        }
      }

      var addPoints = setInterval(addPointToSeries, 1000);
    });
}

• 这里如何将整个数据添加到现有数据中：

演示：https://jsfiddle.net/BlackLabel/zdpxwe1k/

    function requestData() {

      $.getJSON('https://api.myjson.com/bins/qhene',
        function(data) {
          var series = chart.series[0];

                data.forEach(d => {
        series.addPoint(d, false);
    })
          chart.redraw();

        });
    }

---

API：https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Answer 2

我想我成功了。

		var chart;

		function requestData() {

			$.getJSON('Humidity.json',
				function(data) {
				chart.addSeries({name: "Humidity", data: data});
				}
			);
			$.getJSON('Temperature.json',
				function(data) {
				chart.addSeries({name: "Temperature", data: data});
				}
			);

			setInterval(function () {
				$.getJSON('new_Humidity.json',
			    	function(data0) {
						console.log("Humidity data = " + data0[data0.length - 1]);
                    	chart.series[0].addPoint(data0[data0.length - 1], true, true);
			    	}
				);

				$.getJSON('new_Temperature.json',
			    	function(data1) {
						console.log("Temperature data = " + data1[data1.length - 1]);
                    	chart.series[1].addPoint(data1[data1.length - 1], true, true);
			    	}
				);
			}, 1000);
		}


		chart = Highcharts.stockChart('container', {

		chart: {
			events: {
			load() {
				requestData();
			}
			}
		},
		series: []
		});

<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>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
		

		<script src="https://code.highcharts.com/js/themes/gray.js"></script>

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

我可能可以将 data0 和 data1 更改回只是 data.... 而 data0[data0.length - 1] 到 data0[0] 但我可能想检查它是否在我阅读整个文件时也有效json 并使用最后一个值，但我怀疑它会很慢:(