你完全可以通过chart.js在图表上做multiple line Chart.js对它的数据结构格式非常严格（而且我只听说过它和javascript一起使用）

export const data = {
  labels,
  datasets: [
    {
      type: "line" as const,
      label: "Dataset 1",
      backgroundColor: "rgba(75, 192, 192, 1)",
      borderColor: "rgba(255, 99, 132,1)",
      borderWidth: 2,
      fill: false,
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
    },
    {
      type: "line" as const,
      label: "Dataset 2",
      backgroundColor: "rgba(75, 2, 192, 1)",
      borderColor: "rgba(155, 99, 132,1)",
      borderWidth: 2,
      fill: false,
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
    },
    {
      type: "bar" as const,
      label: "Dataset 3",
      backgroundColor: "rgba(53, 162, 235, 0.1)",
      data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
    }
  ]
};

上面你有三个数据集，所以你有两条线和一些条。然后这个数据变量被传递到一个图表。
在响应端，下面是一个代码sanbox：https://codesandbox.io/s/chartjs-multiple-dataset-r1kixh?file=/App.tsx:1747-2138

我刚刚试过Plotly.js可以做到这一点。

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script type="text/javascript">
    var xValues = [50,60,70,80,90,100,110,120,130,140,150];
    var x2Values = [30,40,50,60,70,80,90,100,110,120,130];
    var yValues = [7,8,8,9,9,9,10,11,14,14,15];
    var y2Values = [9,9,8,9,9,19,20,11,34,4,05];
    
    var data = [
      {x: xValues, y: yValues, mode:"lines"},
      {x: x2Values, y: y2Values, mode:"lines"}
    ];
    var layout = {title: "Plotly Chart"};

    Plotly.newPlot("myPlot", data, layout);
    
</script>

如下图所示，行不必使用相同的X列表。

我期待更多的答案来回答我的问题。