求D3实时蜡烛图更新示例：WebSocket/假数据驱动的K线图更新方案

一、基于Chart.js + chartjs-chart-financial的落地实现 #

这是前端实现蜡烛图及实时更新的常用组合，核心是利用Chart.js的数据更新API配合金融图表插件完成需求。

1. 初始化基础图表 #

先搭建初始蜡烛图结构，确保数据格式符合要求：

<canvas id="candlestickChart" width="800" height="400"></canvas>
<script src="chart.min.js"></script>
<script src="chartjs-chart-financial.min.js"></script>
<script>
// 初始化模拟历史K线数据
const initialCandles = [
  { x: new Date('2024-05-01'), o: 100, h: 105, l: 98, c: 102 },
  { x: new Date('2024-05-02'), o: 102, h: 108, l: 100, c: 106 },
  { x: new Date('2024-05-03'), o: 106, h: 110, l: 104, c: 108 }
];

// 创建图表实例
const chart = new Chart(document.getElementById('candlestickChart'), {
  type: 'candlestick',
  data: {
    datasets: [{
      label: 'BTC/USDT',
      data: initialCandles
    }]
  },
  options: {
    scales: {
      x: { type: 'time', time: { unit: 'day' } },
      y: { beginAtZero: false }
    }
  }
});
</script>

2. 增量添加新K线（适配WebSocket推送场景） #

当WebSocket收到新的完整K线数据时，直接追加并更新图表：

// 模拟WebSocket接收新数据（实际项目替换为ws.onmessage回调）
function addNewCandle() {
  const lastCandle = chart.data.datasets[0].data.at(-1);
  const newDate = new Date(lastCandle.x);
  newDate.setDate(newDate.getDate() + 1);

  // 生成模拟K线数据
  const newOpen = lastCandle.c;
  const newHigh = newOpen + Math.random() * 5;
  const newLow = newOpen - Math.random() * 5;
  const newClose = newLow + Math.random() * (newHigh - newLow);

  // 追加新数据
  chart.data.datasets[0].data.push({
    x: newDate, o: newOpen, h: newHigh, l: newLow, c: newClose
  });

  // 限制显示数量，避免数据过载
  if (chart.data.datasets[0].data.length > 20) {
    chart.data.datasets[0].data.shift();
  }

  // 无动画更新，适合高频数据
  chart.update('none');
}

// 定时模拟推送，每3秒新增一条K线
setInterval(addNewCandle, 3000);

3. 更新当前未闭合K线（实时价格波动场景） #

如果需要更新正在形成中的K线（比如实时更新收盘价、最高价、最低价），直接修改现有数据再触发更新：

// 更新最后一条K线的实时数据
function updateCurrentCandle() {
  const currentCandle = chart.data.datasets[0].data.at(-1);
  const newPrice = currentCandle.c + (Math.random() - 0.5) * 2;
  
  // 更新收盘价、最高价、最低价
  currentCandle.c = newPrice;
  currentCandle.h = Math.max(currentCandle.h, newPrice);
  currentCandle.l = Math.min(currentCandle.l, newPrice);

  chart.update('none');
}

// 每秒更新一次当前K线
setInterval(updateCurrentCandle, 1000);

二、核心注意事项 #

• 蜡烛图数据必须包含x（时间戳/日期对象）、o（开盘价）、h（最高价）、l（最低价）、c（收盘价）五个字段，不同库可能用open/high等命名，需对应调整。
• 高频更新时使用chart.update('none')关闭动画，避免页面卡顿；如果需要过渡效果，可改用'active'或'auto'。
• 真实WebSocket场景下，只需将数据处理逻辑移入ws.onmessage回调即可，无需定时模拟。

内容的提问来源于stack exchange，提问作者Finley Bradley