Chart.js如何根据实际数据（x轴）设置相等的步长？

Question

我想实现xaxis的setp大小取决于标签中的实际值。这里有一个excel例子，我希望我的chart.js折线图在x轴上看起来应该是“ 2”：

但是我的chart.js总是将标签均匀地分布在xaxis上：

我的xaxis设置：

xAxes: [{
    display: true,
    scaleLabel: {
      display: true,
      labelString: 'Test'  
    },
    ticks:
    {
    min: 1,
    max:17,
    stepSize: 5,
    },
    distribution: 'linear',

  }],

这里是我的chart.js示例的链接：https://jsfiddle.net/h97remq3/1/

我整个下午都尝试了不同的X轴设置，但从未像excel那样获得理想的结果。我认为该解决方案应该是一个简单的设置，但我没有找到...

Answer 1

代替使用line图表，而使用“散点图”。然后省略data.labels并在data中定义point format，如下所示。

data: [
  { x: 1, y: 10 },
  { x: 2, y: 2 },
  { x: 3, y: 5 },
  { x: 5, y: 22 },
  { x: 10, y: 17 },
  { x: 15, y: 11 },
  { x: 17, y: 3 }
],

请查看您修改后的JSFiddle。