Обновите цену акции на любом графике без повторного построения всего графика

Я играю с диаграммой свечей акций Anychart, которая очень хороша, чтобы обновить диаграмму, я использую функцию setInterval, но она перерисовывает весь график, что отстой, потому что, если я увеличиваю масштаб или что-то в этом роде, он сбрасывается и, очевидно, начинается заново. Есть ли способ просто обновлять последнюю цену из базы данных каждые пару секунд без повторного построения всего графика?

Текущая функция setInterval для загрузки диаграммы:

setInterval(function() {
  $.get('chart_data.php', function(data) {
     $(".main_cont").replaceWith(data);
  });
}, 2000);

Моя переменная chart_data:

$chart_data .= "{'x':'".$open_time."','open': ".$open.",'high': ".$high.",'low': ".$low.",'close': ".$close."},";

chart_data.php файл:

anychart.onDocumentReady(function() {

  // create a data table
  var table = anychart.data.table('x');
  // add data
  table.addData([<?php echo $chart_data;?>]);
    
  // add data
  //table.addData([ {'x':'08/09/2020 10:11','open': 11000,'high': 10000,'low': 8000,'close': 8500}]);

  // create a stock chart
  var chart = anychart.stock(true);

  // create a mapping
  var mapping = table.mapAs({
    'date': 'date',
      'open': 'open',
      'high': 'high',
      'low': 'low',
      'close': 'close',
      'fill': 'fill'
  });
      
  var plot = chart.plot(0);
  // add a series using the mapping
  chart.plot(0).candlestick(mapping).name();

  // set container id for the chart
  chart.container('container');
  var series = chart.plot(0).candlestick(mapping);

  chart.scroller().xAxis(false);

  // initiate chart drawing
  chart.draw();
});

Я хотел бы заменить функцию setInterval чем-то, что просто заменяет последние данные о цене из базы данных, чтобы перемещать свечу вверх или вниз, если добавляется новая запись, нарисуйте новую свечу. У меня есть скрипт для обновления свечи или добавления новой свечи, я просто не могу найти способ сделать это без перерисовки всего графика.


person Ryan D    schedule 07.08.2020    source источник
comment
Вы просмотрели документацию по манипулированию данными? Вы должны иметь возможность использовать JS для получения новых данных каждые две секунды и использовать addData() для замены существующих данных. Если это по-прежнему вызывает полное обновление, вам придется сравнить текущие данные диаграммы с недавно полученными данными и использовать методы вставки, удаления и обновления, как описано в документах, чтобы изменить только измененные данные. Однако это все равно может привести к полному обновлению.   -  person kmoser    schedule 09.08.2020
comment
Да, спасибо, в настоящее время я запрашиваю базу данных для обновления или вставки. Только не знаю как обновить график без перерисовки   -  person Ryan D    schedule 09.08.2020
comment
Я думаю, что это метод, который я ищу, поток данных кажется правильным подходом, но как мне добавить данные БД в поток с помощью php или может ли JS каким-то образом справиться с этим?   -  person Ryan D    schedule 09.08.2020
comment
Вы бы использовали AJAX (из JS) для запроса обновленных данных из скрипта PHP. Данные возвращаются в ваш JS. Вероятно, проще всего отправлять/получать данные в формате JSON; см. api.jquery.com/jQuery.getJSON   -  person kmoser    schedule 09.08.2020
comment
Хорошо, круто, спасибо, я думаю, это то, что я ищу, можете ли вы опубликовать это в качестве примера / ответа, и я плохо приму это   -  person Ryan D    schedule 09.08.2020
comment
Я объединил свои комментарии в ответ.   -  person kmoser    schedule 09.08.2020


Ответы (2)


Вы можете использовать функции для управления данными, чтобы изменить диаграмму.

Вы можете использовать JS для получения новых данных каждые две секунды и использовать addData() для замены существующих данных. Если это по-прежнему вызывает полное обновление, вам придется сравнить разницу между двумя массивами, чтобы определить разницу между текущими данными и вновь полученными данными, и использовать методы insert, delete и update, как описано в документации, для изменения только измененных данных. Однако это все равно может привести к полному обновлению.

Вы бы использовали AJAX (из JS) для запроса обновленных данных из скрипта PHP. Данные возвращаются в ваш JS. Вероятно, проще всего отправлять/получать данные в формате JSON через jQuery.getJSON.

person kmoser    schedule 09.08.2020
comment
Спасибо за объяснение и ответ! - person Ryan D; 09.08.2020

Нет необходимости воссоздавать диаграмму или даже повторно применять все данные. AnyStock API предоставляет все необходимое для обновления части данных. Серия будет обновляться автоматически. Для этого вы можете использовать функцию addData(). Он заменяет все строки с дублирующими ключами последней видимой строкой с этим ключом. Это означает, что в таблицу будут добавлены новые точки, точки с уже существующими ключами в таблице будут переопределены. Итак, все, что вам нужно, это управлять ключами и применять точки в соответствии с вашим отображением. Подробности см. в следующем образце, который имитирует именно то, что вам нужно: https://playground.anychart.com/Cplq7KMd

person AnyChart Support    schedule 10.08.2020