图表 JS：忽略 x 值并将点数据放在第一个可用标签上

Question

我正在 chart.js 中制作折线图，并且遇到了一个问题，我试图在线上绘制点数据，但它忽略了我提供的 x 值，而是将它们放在第一个可用标签上。

this.myLineChart = new Chart(this.ctx, {
    type: 'line',
    data: {
        labels: [0,2,4,6,8,10],
        datasets: [{
            label: 'mylabel1',
            fill: false,
            backgroundColor: 'blue',
            borderColor: 'blue',
            data: [{
                x: 2.5,
                y: 85
            }, {
                x: 3.5,
                y: 85
            }]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'mytitle1'
        },
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 70,
                    suggestedMax: 100
                }
            }]
        }
    }
});

我得到的结果是这样的：

但相反，我希望这条线位于 x 值 2.5 和 3.5 处，以便它位于 2 和 4 标签之间。

我应该在代码中更改什么以使其按照我的意愿运行？

Answer 1

在这种情况下，您不需要使用labels数组。而是在图表选项中将 x 轴的类型设置linear为 x 轴刻度的最小值和最大值（可能stepSize也是），如下所示：

xAxes: [{
   type: 'linear',
   ticks: {
      suggestedMin: 0,
      suggestedMax: 10,
      stepSize: 2
   }
}]

??????? ？X？？？？？?

xAxes: [{
   type: 'linear',
   ticks: {
      suggestedMin: 0,
      suggestedMax: 10,
      stepSize: 2
   }
}]

myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      datasets: [{
         label: 'mylabel1',
         fill: false,
         backgroundColor: 'blue',
         borderColor: 'blue',
         data: [{
            x: 2.5,
            y: 85
         }, {
            x: 3.5,
            y: 85
         }]
      }]
   },
   options: {
      title: {
         display: true,
         text: 'mytitle1'
      },
      scales: {
         xAxes: [{
            type: 'linear',
            ticks: {
               suggestedMin: 0,
               suggestedMax: 10,
               stepSize: 2 //interval between ticks
            }
         }],
         yAxes: [{
            display: true,
            ticks: {
               suggestedMin: 70,
               suggestedMax: 100
            }
         }]
      }
   }
});