如何在 Chart.js 中指定刻度位置？

Question

我正在寻找一种在chart.js图表上手动指定 x/y 刻度位置的方法，相当于 matplotlib 的matplotlib.pyplot.xticks。该文档解释了如何创建自定义刻度格式，但这适用于自动计算的刻度位置。如何指定刻度位置？

这是我正在使用的配置：

var config = {
    type: "line",
    data: {
        labels: [],
        datasets: [{
            data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
            fill: false,
            borderColor: "#1f77b4",
        }],
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                distribution: 'series',
                ticks: {
                    min: 0.,
                    max: 7.,
                },
            }]
        },
    },
}

它产生这个文件：

我想指定 xticks 位置，例如[0., 3.5, 5.7, 6.1]，以便绘图看起来更像（不考虑网格线和平滑绘图线）：

Answer 1

显然，对于Chart.js v3，接受的解决方案不再按预期工作。afterBuildTicks按照b1000在他的评论中建议的尝试，它也不起作用。

要使其与 一起使用afterBuildTicks，您需要将数值映射到具有valueevery ( [{ value: 0 }, { value: 3.5 }, ... ]) 属性的对象。这可以按如下方式完成：

afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v })) 

请看下面的可运行示例：

afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v })) 

new Chart('line-chart', {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
      showLine : true,
      borderColor: '#1f77b4',
    }]
  },
  options: {
    scales: {
      x: {    
        min: 0,
        afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v })) 
      }
    }
  }
});

canvas {
  max-height: 180px;
}