How to use chart.js drawing multiple lines from line sets with (X, Y) values?

Question

我不会像 Chart.js 文档那样按月绘制多条线图。 我有一些数据，例如：

line1={(X=1.1, Y=100), (X=2.1, Y=200), ... }

line2={(X=1.2, Y=110), (X=2.2, Y=210), ... }

……

我希望所有线条都绘制在与下图相同的画布上。

我的意思是不同的线可能有不同的 X 坐标。

Chart.js 似乎不支持这种折线图（点必须准确对齐在标签列表中列出的固定 X 上）。 Chart.js 可能喜欢：

X = {X=1.1, X=2.1, ...}

line1={ y1, y2, y3 ... }

line2={ y'1, y'2, y'3 ... }

所有行共享相同的 X.

但是 QT 可以像我预期的那样处理好。

如果 Chart.js 不是完成这项工作的最佳选择，请告诉我哪个更好。我不喜欢用raw js在画布上画线。 Plotly 是一个不错的选择吗？

Answer 1

你绝对可以通过 chart.js 在图表上做多行 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 }))
    }
  ]
};

上面有三个数据集，所以你有 2 条线和一些条形图。然后将该数据变量传递给图表。

在反应方面，这里有一个 codesanbox：https://codesandbox.io/s/chartjs-multiple-dataset-r1kixh?file=/App.tsx:1747-2138