如何在 chart.js 中指定刻度位置？答案

【问题标题】：How to specify ticks locations in chart.js?如何在 chart.js 中指定刻度位置？
【发布时间】：2020-05-24 10:03:21
【问题描述】：

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

这是我正在使用的配置：

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]，让情节看起来更像（不考虑网格线和平滑的情节线）：

【问题讨论】：

请发布您已经拥有的代码，可能带有预期结果的图片。
@uminder 我编辑了我的问题

标签： charts location chart.js

【解决方案1】：

为了不在图表上绘制网格线，您需要按照Grid Line Configuration 中的说明将以下内容添加到轴中。

gridLines: {
  drawOnChartArea: false 
}

为了仅在所需位置获得刻度，您将定义xAxis.ticks，如下所示并记录在Tick Option 和Creating Custom Tick Formats。

ticks: {
  ...       
  stepSize: 0.1,
  autoSkip: false,
  callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
  maxRotation: 0
},

最后，要获得数据点之间的直线，请在您的数据集上定义 lineTension: 0，如 Line Styling 中所述。

请在下面查看您修改后的代码。

var config = {
  type: "line",
  data: {
    labels: [],
    datasets: [{
      data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
      fill: false,
      lineTension: 0,
      borderColor: "#1f77b4",
    }],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        ticks: {
          min: 0.,
          max: 7.,          
          stepSize: 0.1,
          autoSkip: false,
          callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
          maxRotation: 0
        },
        gridLines: {
          drawOnChartArea: false
        }
      }],
      yAxes: [{
        ticks: {
          showLabelBackdrop: true
        }, 
        gridLines: {
          drawOnChartArea: false
        }
      }]
    },
  },
};

new Chart('line-chart', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

【讨论】：

谢谢@uminder！你如何看待覆盖options.scales.xAxes[0].afterBuildTicks，比如afterBuildTicks: function(axis, ticks) {return [0, 3.5, 5.7, 6.1];}？这样我就不会依赖刻度位置是stepSize 的倍数。
我从未使用过afterBuildTicks，但你的想法听起来不错，试试看。
感谢@b1000，我遇到了同样的问题，因为在我的图表中，x 轴范围太大，所以不能选择设置步长。你的想法很成功！
示例代码似乎不适用于 3.5 版
@uwe：我发布了一个新答案，说明了如何使用Chart.js v3 来完成。

【解决方案2】：

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

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

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="line-chart"></canvas>

【讨论】：