时间戳

首页 > 解决方案 > 在任何图表中更新股票价格而不重新绘制整个图表

javascript - 在任何图表中更新股票价格而不重新绘制整个图表

问题描述

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

标签： javascriptphpjqueryajaxanychart

解决方案

您可以使用处理数据的函数来更改图表。

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

您将使用 AJAX（来自 JS）从 PHP 脚本请求更新的数据。数据将返回到您的 JS。通过jQuery.getJSON发送/接收 JSON 格式的数据可能是最简单的。

推荐阅读