Chart.js V4.3.0 X轴标签未对齐

vdzxcuhz  于 2023-06-22  发布在  Chart.js
关注(0)|答案(1)|浏览(184)

使用Chart.js v4.3.0,我尝试在垂直条形图上左对齐x轴标签。默认情况下,它们是居中的,我阅读的the docs表明,将其添加到图表的options中就可以做到这一点:

ticks: {
  align: 'start',
},

奇怪的是,这将标签稍微向右移动,但仍然没有对齐。
CodePen问题演示:https://codepen.io/ChrisBup/pen/qBQWqPw

预期行为:

我设置了labelOffset来获取屏幕截图,但因为它只需要一些像素,所以它不是一个响应式的解决方案。

额外上下文:

Chart.js版本:4.3.0
浏览器:Chrome Version 113.0.5672.126(Official Build)(arm64)

yuvru6vn

yuvru6vn1#

我认为对齐选项按设计工作。应用选项的位置与“刻度”的中间有关。它作为Context2D https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign的textAlign属性实现
您可以通过自定义插件更改刻度的位置:

const p = {
  id: 'my',
  beforeDraw(chart) {
    const scale = chart.scales.x;
    const items = scale.getLabelItems();
    const {data} = chart.getDatasetMeta(0);
    for (let i=0; i<items.length; i++) {
      const {x, width} = data[i];
      const newX = x - width / 2;
      items[i].options.translation.splice(0, 1, newX);
    }
  },  
}

你应该添加插件

new Chart(ctx, {
  type: 'bar',
  plugins: [p],
  data: {
  ...

然后将align选项设置为“X刻度”到'start'
Codepen:https://codepen.io/stockinail/pen/qBQWxZQ

相关问题