英文:
Chart.js V4.3.0 X-Axis Labels Not Aligning
问题
使用 Chart.js v4.3.0，我尝试将垂直柱状图的 x 轴标签左对齐。它们默认居中，根据[文档][1]的阅读，将以下内容添加到图表的 `options` 应该可以实现：
ticks: {
align: 'start',
},
奇怪的是，这会使标签略微向右移动，仍然不对齐。
问题的 CodePen 演示：https://codepen.io/ChrisBup/pen/qBQWqPw
### 期望行为：
我设置了 `labelOffset` 来获取这个截图，但由于它只接受像素数，这不是一个响应式的解决方案。
### 额外上下文：
Chart.js 版本：4.3.0
浏览器：Chrome 版本 113.0.5672.126（官方版本）（arm64）
[1]: https://www.chartjs.org/docs/4.3.0/axes/cartesian/linear.html
英文:
Using Chart.js v4.3.0, I'm trying to left-align x-axis labels on a vertical bar chart. They are centered by default and my reading of the docs indicates that adding this to the chart's options would do it:
ticks: {
align: 'start',
},
Weirdly, that moves the labels slightly right and still not aligned.
CodePen demo of issue: https://codepen.io/ChrisBup/pen/qBQWqPw
Expected Behavior:
I set labelOffset to get the screenshot, but as it only takes a number of pixels, it's not a responsive solution.
Extra Context:
Chart.js version: 4.3.0
Browser: Chrome Version 113.0.5672.126 (Official Build) (arm64)
答案1
得分: 1
我认为 align 选项的工作方式是按设计进行的。应用该选项的位置与 "刻度" 的中间相关。它实现为 Context2D 的 textAlign 属性 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/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
英文:
I think the align option is working as designed. The position where the option is applied is related to the middle of the "tick". It's implemented as textAlign property of Context2D https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign
You can change the position of the ticks by a custom plugin:
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);
}
},
}
You should add the plugin
new Chart(ctx, {
type: 'bar',
plugins: [p],
data: {
...
and then set align option to the X scale ticks to 'start'.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论