图表J；条形图； X 轴标签可以简单地左对齐/对齐而不是居中吗？

Question

X 轴上的标签是否可以左对齐/两端对齐，而不是像下面的示例那样居中显示？

即要求是标签应与每个条的灰色垂直分隔线对齐。

原始 X 轴标签

左对齐 X 轴标签

我已阅读文档，似乎可能可以通过“ticks:”使用“userCallback函数覆盖”来修改x轴标签本身，但我不确定我是否过于复杂化，以及这是否正确方法 - 然后，如果这是正确的方法，那么勾选什么：需要属性/选项/参数来左对齐标签？

或者除了使用ticks/userCallback之外还有更简单的方法吗？

代码片段...

xAxes: [{
  ticks: {
    userCallback: function(value, index, values) {
      return value ??? Not sure what return here/ barWidth???
    }
  }
}]

谢谢

Answer 1

Chart.js 对齐方式在此页面中描述：https://www.chartjs.org/docs/latest/samples/legend/title.html

x 刻度对齐有三个值：开始、中心（默认）和结束。

在您的情况下，以下代码应该可以工作（我没有测试它）。

new Chart(handler,{
  options: {
...
    scales: {
      x: {
        ticks: {
          align: 'start',
        }
      }
    }
  }
})