ChartJS v4折线图使用点数据时所有X值均显示为0的问题

问题出在ChartJS的x轴默认配置上：当你使用{x: 数值, y: 数值}格式的数据时，默认的category类型x轴无法识别数值型的x坐标，会把所有数据点都归到同一个分类下，所以全部显示在x:0位置。

解决方法很简单，在图表配置里添加options，将x轴的类型设置为linear（数值型轴）：

修改后的完整代码如下：

var data = {
  datasets: [
    {
      label: "Bug Report",
      data: [
        { x: 0, y: 1 },
        { x: 1, y: 2 },
        { x: 2, y: 4 }
      ]
    }
  ]
};

const ctx = document.getElementById("myChart");
new Chart(ctx, {
  type: "line",
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear', // 设置x轴为数值型轴
        position: 'bottom'
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div>
  <canvas id="myChart"></canvas>
</div>

这样配置后，x轴会正确解析每个数据点的x数值，三个点就会分别显示在x:0、x:1、x:2的位置上。

内容的提问来源于stack exchange，提问作者Link