HighStock / HighCharts динамически добавляют точку от JSON к серии (события)

Question

У меня есть график Хайстока, чтобы показать данные о температуре из нескольких 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>

Когда я добавил приведенный выше фрагмент, он выдал ошибку в строке 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]]

Я думаю, мне нужно вызвать get JSON внутри requestData () несколько раз !? По одному на каждую серию.

В настоящее время я использую setInterval , но есть ли способ сделать это всякий раз, когда JSON обновляется / перезаписывается?

Заранее спасибо за помощь Я.

РЕДАКТИРОВАТЬ : В ответ Себастьяну Вендзелю мои намерения могут быть не совсем ясны:)

Я пытался сделать следующее. У меня есть 4 json файлов, 2 из них содержат значения температуры / влажности за прошедшие дни, а 2 из них содержат только самые последние измерения. У меня PHP скрипт, обновляющий все 4 периодически. Когда моя страница загружается, она загружает 2 больших json файла в виде отдельных рядов в диаграмму. После загрузки графика я хочу, чтобы он периодически добавлял новые измерения в график без необходимости перезагружать всю страницу. Это на самом деле похоже на этот пример: Живые данные из динамического c CSV , но я использую JSON (хотя CSV был бы возможен), и мне нужно несколько серий. Оба из которых я не получил работать с этим примером CSV.

Answer 1

Я думаю, у меня получилось.

		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 обратно на просто данные .... И data0 [data0.length - 1] на data0 [0], но я Возможно, вы захотите проверить, работает ли он, когда я прочитал весь json и использовал последнее значение, но подозреваю, что он будет медленным: (

Answer 2

1. Я получил ошибку Highcharts # 16, потому что в вашем html вы добавили скрипты Highcharts и Highstock.

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

Обратите внимание, что this внутри функции requestData указывает на функциональность get JSON, а не на объект диаграммы - это означает, что this.series не определен.

Я предположил, что get JSON для температуры и влажности работает нормально, и диаграмма была инициализирована, и теперь я не уверен, хотите ли вы добавить все данные к существующим данным или добавить точки один за другим из полученных данных.

• Вот подход, позволяющий добавлять очки по одному:

Демо: 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