使用extendTraces更新plotly.js烛台图

Question

我试图每2秒更新一次plotly.js烛台图表，而不刷新整个图表（如果我使用Plotly.react，就会发生这种情况。）

我遇到的问题是，当我使用extendTraces蜡烛时，x值相同的蜡烛会相互重叠（基本上与this question中的蜡烛一样）。

这是初始绘制，烛台是迹线1，迹线0是体积的条形图：

function draw_chart(li, data) {
  let trace = [
    {
      y: data.bars.vals,
      x: data.sticks.x,
      marker: {color: data.bars.colors},
      xaxis: 'x',
      yaxis: 'y1',
      type: 'bar'
    },
    {
      ...data.sticks,
      increasing: {line: {color: 'green'}},
      decreasing: {line: {color: 'red'}},
      type: 'candlestick',
      xaxis: 'x', 
      yaxis: 'y2'
    },
  ];
  let x_range = [ data.sticks.x[0], data.sticks.x[ data.sticks.x.length - 1 ] ];
  let layout = {
    dragmode: 'pan', 
    showlegend: false, 
    xaxis: {
      rangeslider: {visible: false},
      // autorange: true,
      domain: [0, 1], 
      range: x_range,
      type: 'date'
    }, 
    yaxis1: {
      title: 'volume',
      domain: [0, .39],
      autorange: true,
      type: '-'
    },
    yaxis2: {
      title: 'price',
      domain: [.40, 1],
      autorange: true,
      type: 'linear'
    },

    margin: { l: 50, r: 50, t: 50, b: 50 }
  };
  Plotly.newPlot(
    li.querySelector('.graph'),
    trace,
    layout,
    {scrollZoom: true, responsive:true, displayModeBar: false}
  );
}

这是我尝试更新图表的地方：

function extend_chart(li, data) {
  let {opened, close, timestamp, high, low, volume,color} = {...data.candles};
  Plotly.extendTraces(li.querySelector('.graph'), {
      x:[[timestamp]],
      open:[[opened]],
      close:[[close]],
      high:[[high]],
      low:[[low]]
    }, [1]);

  Plotly.extendTraces(li.querySelector('.graph'), {
    x:[[timestamp]],
    y:[[volume]],
    'marker.color':[[color]]
  }, [0]);
}

如果有人可以告诉我如何正确执行此操作，我将不胜感激。