如何使用chart.js创建多个X轴数据集标签

jfewjypa 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(216)

我正在使用chart.js来绘制折线图。目前需要绘制3条不同的线。它们具有相同的y轴数据集，但x轴数据集不同。例如：

y-axis datasets: [2,4,6,8,10]
x-axis1 datasets: [1,2,3,4,5]
x-axis2 datasets: [5,6,7,8,9]
x-axis3 datasets: [8,9,10,12,14]

我希望x轴的范围是1到14。并显示他们的每个数据集的真实的值。
但是，我研究了一下，发现了通过xAxisID使用不同x轴标签的方法，但这样一来，x-axis 2和x-axis 3仍然使用1、2、3、4、5作为x轴数据集。
有谁知道我怎么才能做到这一点？

1条答案

这可以通过将datasets.data定义为每个都具有x和y属性的对象数组来实现。

data: [
  { 'x': 1, 'y': 2 },
  { 'x': 2, 'y': 4 },
  { 'x': 3, 'y': 6 },
  { 'x': 4, 'y': 8 },
  { 'x': 5, 'y': 10 }
]

您可以使用Array.map()轻松转换您的数据。请看一下下面的可运行代码，看看它是如何工作的。
第一个