javascript - Rita samma stapeldiagram med viss fördröjning (ändring i x-axelvärde) med plotly js

Vårt initiala krav är att ta emot data från servern och utföra vissa klient-sidigare beräkningar och skicka beräknade data till Plotly för att rita grafen som visas i bilden nedan.

Vi har ett nytt krav att rita en ny spårning ovanpå den gamla spårningen med viss fördröjning som vi får från servern. Dessutom behöver vi lägga till en ny färg eller spridningslinjer på den del av den gamla spårningen som är synlig.

Nedan är bilden som förklarar samma krav

I bilden ovan är trace3-diagrammet ritad från 0,5 till 3,5 med en fördröjning på 0,5.

Nedan är koden (inte komplett kod) som vi använde för att rita Plotly-diagram för de initiala kraven

let layout = {
  plot_bgcolor: phase.backgroundColor as Color,
  paper_bgcolor: '#f3f3f3',
  margin: { r: 0, l: 0, t: 30, b: 35 },
  legend: { traceorder: 'reversed' },
  showlegend: phase.showlegendValue,
  xaxis: {
    title: 'Pulse Width (ms): ' + Math.round(pulseWidthMs),
  },
} as Layout;

return {
  data: traceData,
  layout: layout,
  config: { responsive: true, displayModeBar: false },
};

spåra obj efter beräkning

trace1 = {
    name: 'trace1',
    type: 'scatter',
    mode: 'lines',
    line: { shape: 'hv' },
    yaxis: `y${traces.length + 1}`,
    x: plotValues.xValues,
    y: plotValues.yValues,
    fill: 'tozeroy',
    hoverinfo: 'name',
} as unknown as PlotData

Vi försökte olika tillvägagångssätt och ingen av dem passar våra krav. Vi försökte också layout stack/overlay-tillvägagångssätt men det var inte hjälpsamt.

Vi behöver lite hjälp för att uppnå detta nya krav. Vänligen ge dina värdefulla synpunkter. Tack på förhand.