如何以指定/固定间隔设置 ChartJS x 轴刻度？

Question

我有一个 Chart.js 折线图，其中 x 轴标签是普通的旧数字，例如 [2,4,15,45,90]，代表该图表上的天数。我不希望 x 轴刻度反映数据标签，我希望刻度间隔为 20。我怎样才能实现这一点？

这在我的选择中没有任何作用：

xAxes: [ {
    display: true,
    position: 'bottom',
    ticks: {
       stepSize: 20,
       min: 0,
       max: 140
    }
],

这里的例子：jsfiddle

...我发现的唯一（可怕的）方法是将数字转换为日期，并在刻度回调中计算天数差异。如这里所见

Answer 1

您可以使用散点图来接受数据作为单个点、具有属性的对象x和y. 要将散点图转回折线图，只需showLine: true在每个 上定义即可dataset。

要将数据生成为单独的点，您可以在labels图表外部定义并使用Array.map()如下方式转换两个值数组。

valueArray.map((v, i) => ({ x: labels[i], y: v }))

最后要做的事情是定义xAxis.ticks如下：

ticks: {
  stepSize: 1,
  autoSkip: false,
  callback: value => value % 20 == 0 ? value : null,
  min: labels[0],
  max: labels[labels.length - 1],
  maxRotation: 0
},

请查看下面修改后的代码：

valueArray.map((v, i) => ({ x: labels[i], y: v }))

ticks: {
  stepSize: 1,
  autoSkip: false,
  callback: value => value % 20 == 0 ? value : null,
  min: labels[0],
  max: labels[labels.length - 1],
  maxRotation: 0
},