javascript - 如何使用 Chart.js 创建多个 x 轴数据集标签

Question

我正在使用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-axis2和x-axis3仍然使用1,2,3,4,5作为x-轴数据集。

有谁知道我怎样才能实现这个目标？

Answer 1

这可以通过将datasets.data定义为array of objects来完成各有一个 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()轻松转换您的数据。请看一下下面的可运行代码并了解它是如何工作的。

const y = [2, 4, 6, 8, 10];
const x1 = [1, 2, 3, 4, 5];
const x2 = [5, 6, 7, 8, 9];
const x3 = [8, 9, 10, 12, 14];

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'A',
      data: y.map((v, i) => ({ x: x1[i], y: v })),
      borderColor: 'rgb(255, 0, 0)',
      backgroundColor: 'rgba(255, 0, 0, 0.2)'
    },
    {
      label: 'B',
      data: y.map((v, i) => ({ x: x2[i], y: v })),
      borderColor: 'rgb(0, 255, 0)',
      backgroundColor: 'rgba(0, 255, 0, 0.2)'
    },
    {
      label: 'C',
      data: y.map((v, i) => ({ x: x3[i], y: v })),
      borderColor: 'rgb(0, 0, 255)',
      backgroundColor: 'rgba(0, 0, 255, 0.2)'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        suggestedMin: 1,
        suggestedMax: 14,
        ticks: {
          stepSize: 1
        }
      },
      y: {
        beginAtZero: true
      }
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<canvas id="myChart" height="80"></canvas>