AnyChart实时流股票图表开发问题：自定义数据与蜡烛图切换

1. 用自定义OHLC数组替换随机数据 #

直接用你的newData数组分两步处理：先加载初始历史数据，再定时推送后续模拟交易数据，完全替代示例中的随机生成逻辑。

代码实现： #

// 你的预定义OHLC数据数组
var newData = [
 [23,23,21.85,22.87],
 [22.87,22.87,22.64,22.72],
 [22.72,23.63,21.58,21.69],
 [21.69,22.12,21.69,21.91],
 [21.91,23.01,21.47,22.14],
 [22.14,22.8,21.92,22.42],
 [22.42,23.32,21.3,23.31],
 [23.31,23.31,22.14,23.23],
 [23.23,23.23,23.23,23.23],
 [23.23,23.93,23.23,23.62],
 [23.62,24.56,23.38,24.22],
 [24.22,25.19,24.22,24.38],
 [24.38,25.6,23.4,23.82],
 [23.82,23.82,23.11,23.27],
 [23.27,24.2,22.11,23.93],
 [23.93,25.13,23.45,23.73],
 [23.73,24.92,23.73,24.13]
];

// 初始化AnyChart数据表
var dataTable = anychart.data.table();

// 第一步：加载初始历史数据（比如取前8项，可根据需求调整数量）
var initialHistory = newData.slice(0, 8);
dataTable.addData(initialHistory);

// 第二步：准备后续模拟交易的推送数据队列
var streamingQueue = newData.slice(8);
var currentIndex = 0;

// 定时推送数据模拟实时行情（每秒1条，可自行修改间隔）
setInterval(function() {
  if (currentIndex < streamingQueue.length) {
    // 每次推送一条数据
    dataTable.addData([streamingQueue[currentIndex]]);
    currentIndex++;
  }
}, 1000);

说明：如果是从数据库拉取数据，只需把newData替换为接口返回的数组即可，逻辑完全通用。

2. 切换为蜡烛图 #

实时流的数据源逻辑无需改动，仅需修改图表系列的创建方式，同时确保数据映射与你的OHLC数组顺序匹配：

代码实现： #

// 创建股票图表实例
var chart = anychart.stock();

// 映射数据字段：你的数组顺序是[Open, High, Low, Close]，对应索引0-3
var dataMapping = dataTable.mapAs({
  open: 0,
  high: 1,
  low: 2,
  close: 3
});

// 创建蜡烛图系列（替换示例中的line/area等系列类型）
var candlestickSeries = chart.plot(0).candlestick(dataMapping);

// 可选：自定义蜡烛图样式（上涨/下跌颜色）
candlestickSeries.normal().risingFill("#26a69a");
candlestickSeries.normal().risingStroke("#26a69a");
candlestickSeries.normal().fallingFill("#ef5350");
candlestickSeries.normal().fallingStroke("#ef5350");

// 渲染图表到指定容器
chart.container("container");
chart.draw();

说明：核心是调用candlestick()方法创建系列，只要数据映射的字段与数组索引对应，蜡烛图就能正常渲染，且完全兼容实时流的推送逻辑。

内容的提问来源于stack exchange，提问作者Kjeil Lease