在不重新绘制整个图表的情况下更新任何图表中的股票价格

Question

我正在玩 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 函数替换为仅替换数据库中的最后价格数据以向上或向下移动蜡烛的函数，如果添加了新记录，则绘制新蜡烛。我有更新蜡烛图或添加新蜡烛图的脚本，我只是找不到不重新绘制整个图表的方法。

Answer 1

您可以使用 manipulating data 的功能来更改图表。

可以使用JS每两秒取一次新数据，使用addData()替换已有数据。如果仍然导致完全刷新，则必须比较 difference between two arrays 以确定当前数据和新获取的数据之间的差异，并使用 insert、delete 和 update 文档中描述的方法来仅更改已更改的数据。但是，这仍然可能导致完全刷新。

您将使用 AJAX（来自 JS）从 PHP 脚本请求更新数据。数据返回给您的 JS。通过 jQuery.getJSON.

JSON 格式的 send/receive 数据可能是最简单的

Answer 2

无需重新创建图表，甚至无需重新应用整个数据。 AnyStock API 提供了更新部分数据所需的一切。该系列将自动更新。为此，您可以使用 addData() 函数。它用最后看到的具有该键的行替换所有具有重复键的行。这意味着新点将添加到 table，table 中已有键的点将被覆盖。因此，您所需要的只是根据您的映射管理密钥和应用点。有关详细信息，请查看以下示例，它完全模拟了您的需要 - https://playground.anychart.com/Cplq7KMd

在不重新绘制整个图表的情况下更新任何图表中的股票价格

Update stock price in anychart without re-plotting whole chart

javascript

php

jquery

ajax

anychart