javascript - Vẽ biểu đồ cột cùng loại với một số độ trễ (thay đổi giá trị trên trục x) bằng plotly js

Yêu cầu ban đầu của chúng tôi là nhận dữ liệu từ máy chủ và thực hiện một số phép tính phía khách hàng rồi gửi dữ liệu đã tính toán đến Plotly để vẽ đồ thị như được hiển thị trong hình dưới đây.

Chúng tôi có một yêu cầu mới là vẽ dấu vết mới lên trên dấu vết cũ với một độ trễ mà chúng tôi nhận được từ máy chủ. Ngoài ra, cần thêm một màu mới hoặc các đường phân tán vào phần của dấu vết cũ mà có thể nhìn thấy.

Dưới đây là hình ảnh giải thích các yêu cầu tương tự

Trong hình ảnh ở trên, biểu đồ trace3 được vẽ lại từ 0,5 đến 3,5 với độ trễ 0,5.

Dưới đây là mã (không đầy đủ) mà chúng tôi đã sử dụng để vẽ biểu đồ plotly cho các yêu cầu ban đầu

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 },
};

theo dõi đối tượng sau khi tính toán

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

Chúng tôi đã thử nhiều phương pháp khác nhau nhưng không phương pháp nào phù hợp với yêu cầu của chúng tôi. Cũng đã thử các phương pháp xếp chồng/phủ lớp bố cục nhưng không hữu ích.

Chúng tôi cần một số sự giúp đỡ để đạt được yêu cầu mới này. Kính mong quý vị cung cấp những ý kiến quý giá. Xin cảm ơn trước.