chart.js - 由于标签过于紧凑，如何修复 X ​​轴中的网格线数量

Question

如何修复 X ​​轴中的网格线数量，因为标签过于紧凑。示例：https ://www.chartjs.org/samples/latest/charts/line/basic.html

如果我们添加 60+ 数据标签过于紧凑，那么在更多的值之后，轴线调整以隐藏一些值以正确显示标签。

有没有办法控制调整轴线数的触发点？

标签： chart.js

Answer 1

假设你定义了xAxes.time.unit: 'month'，你可以定义time.stepSize如下。

xAxes: [{
  type: 'time',
  time: {
    unit: 'month',
    stepSize: 2
  },

time.stepSize：网格线之间的单位数。

Chart.js 内部使用Moment.js来实现时间轴的功能。因此，您应该使用在单个文件中包含 Moment.js 的 Chart.js捆绑版本。