求助：如何用Chart.js渲染Coinbase Level2 API流式折线图？

核心问题分析 #

尝试用Chart.js结合realtime插件绘制Coinbase Level2 API的bid/ask实时折线图失败，主要可能存在以下几个问题：

• Level2数据是订单簿增量更新，并非每个推送都对应独立时间点的价格，直接遍历bids/asks数组push数据会导致重复或无效数据
• 未将Coinbase返回的时间字符串转换为Chart.js可识别的Date对象
• onRefresh逻辑未处理数据去重，导致图表数据冗余
• WebSocket数据接收与图表刷新的同步逻辑缺失

修复方案 #

1. 正确处理Level2数据 #

Coinbase Level2通道推送的是订单簿的增量更新（新增、修改、删除委托），需要维护当前最优bid/ask价格，而非直接使用所有推送数据。每次收到WebSocket消息时，记录当前时间和最新的最优bid（最高买入价）、ask（最低卖出价）。

2. 修正Chart实时刷新逻辑 #

在onRefresh回调中，只添加最新的价格点，避免重复遍历历史数据：

options={{
  scales: {
    x: {
      type: "realtime",
      realtime: {
        delay: 1000, // 控制刷新间隔
        onRefresh: (chart) => {
          // 仅添加最新的bid价格点（需维护latestBid变量存储最新数据）
          if (latestBid) {
            chart.data.datasets[0].data.push({
              x: new Date(latestBid.time),
              y: parseFloat(latestBid.price)
            });
          }
          // 仅添加最新的ask价格点
          if (latestAsk) {
            chart.data.datasets[1].data.push({
              x: new Date(latestAsk.time),
              y: parseFloat(latestAsk.price)
            });
          }
          // 可选：限制数据点数量，避免图表卡顿
          chart.data.datasets[0].data = chart.data.datasets[0].data.slice(-50);
          chart.data.datasets[1].data = chart.data.datasets[1].data.slice(-50);
        }
      }
    },
    y: {
      title: {
        display: true,
        text: "价格"
      }
    }
  }}
}}

3. 完善WebSocket数据处理 #

确保WebSocket正确订阅Level2通道，并维护最新的bid/ask价格：

// 初始化WebSocket连接
const ws = new WebSocket('wss://ws-feed.exchange.coinbase.com');
let latestBid = null;
let latestAsk = null;

ws.onopen = () => {
  ws.send(JSON.stringify({
    type: 'subscribe',
    product_ids: ['BTC-USD'], // 替换为目标交易对
    channels: ['level2']
  }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'l2update') {
    // 处理增量更新，维护最优bid/ask
    data.changes.forEach(change => {
      const [side, price, size] = change;
      const currentTime = new Date().toISOString();
      if (side === 'buy' && parseFloat(size) > 0) {
        latestBid = { time: currentTime, price };
      } else if (side === 'sell' && parseFloat(size) > 0) {
        latestAsk = { time: currentTime, price };
      }
    });
  } else if (data.type === 'snapshot') {
    // 处理初始快照，获取初始最优bid/ask
    latestBid = data.bids[0];
    latestAsk = data.asks[0];
    latestBid.time = new Date().toISOString();
    latestAsk.time = new Date().toISOString();
  }
};

4. 确保Chart数据集初始化正确 #

data={{
  datasets: [
    {
      label: '买入委托(Bid)',
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.1)',
      borderWidth: 2,
      fill: false,
      tension: 0.1,
      data: []
    },
    {
      label: '卖出委托(Ask)',
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.1)',
      borderWidth: 2,
      fill: false,
      tension: 0.1,
      data: []
    }
  ]
}}

关键注意事项 #

• Level2数据是订单簿更新，并非逐笔成交数据，需关注最优买卖价而非所有委托
• 控制图表数据点数量，避免因数据过多导致性能问题
• 确保时间格式为Date对象，Chart.js才能正确解析
• WebSocket连接需处理重连逻辑，避免断开后数据中断

内容的提问来源于stack exchange，提问作者Ashish Singh Rawat