我愿意学习已经有一种方法(通过配置或开发插件)来挂钩轴标签的渲染,这样我就可以控制用于渲染多行标签每一行的字体的各个方面(例如,我需要渲染的内容在视觉上类似于其下方的标签和子标签,主标签为粗体且字体较大,而直接位于其下方的子标签将是正常字体粗细且较小尺寸)。
我正在使用 ChartJs 3.5.1 版来呈现水平条形图(这意味着左侧的数据集标签实际上是在 y 轴下配置的),并且已经尝试了一些不同的东西:
- 挂钩滴答回调 - 但我什至不能使用这个函数来复制默认功能(进入该函数的值不是标签文本;而是数据行的索引/序号?)。即使我可以按照示例中所示的那样工作,对于标签的内容来说,这似乎比任何配置选项本身更重要。
- 将字体配置设置为
ticks
数组 - 但这仅允许我更改数据行之间的字体(例如,我可以将水平条形图中第一行的标签设置为 22,第二个标签设置为 10,等-但不更改给定标签行内的字体属性) - 使用插件
afterDraw
来尝试调整事物 - 但同样,此时的配置似乎只将所有行视为一个标签。 - 尝试查看项目过去的 PR(主要集中在添加多行标签支持,以及特定于该区域的错误修复)以获得任何额外的见解
如果目前没有办法(通过插件或现有配置),是否有人对从哪里开始攻击这种变化作为新 PR 有很好的感觉?
更新 作为对我相应的ChartJs 功能请求的响应以及下面接受的答案,自定义插件似乎是目前完成我现在想要的唯一方法。
以下是我的配置中的关键位(诚然,“一次性使用”比接受的答案要多得多,因为鉴于我相对狭窄的用例,我将插件内部的一些配置作为硬编码值移动):
// this will be passed into the chart constructor...
const options = {
//...
scales: {
//...
// I wanted to impact the lefthand side of a horizontal bar chart
y: {
ticks: {
// make the original labels white for later painting over with custom sub-labels
color: "white",
// we still want this here to be able to take up the same space as the eventual label we will stick here
font: {
size: 22,
weight: "bold"
}
}
},
//...
}
};
// This is my plugin, also later passed into the chart constructor
const customSubLabelsPlugin = {
id: "customSubLabels",
afterDraw: (chart, args, opts) => {
// Set all variables needed
const {
ctx,
// I only cared about altering one specific axis
scales: { y }
} = chart;
const labelItems = y._labelItems;
const fontStringSubTitle = "16px Helvetica,Arial,sans-serif";
const fontStringMain = "bold 22px Helvetica,Arial,sans-serif";
// loop over each dataset label
for (let i = 0; i < labelItems.length; i++) {
let labelItem = labelItems[i];
// For purposes of redrawing, we are going to always assume that each label is an array - because we make it that way if we need to
const label = Array.isArray(labelItem.label)
? labelItem.label
: [labelItem.label];
// Draw new text on canvas
let offset = 0;
label.forEach((el) => {
let elTextMetrics = ctx.measureText(el);
if (labelItem.label.indexOf(el) === 0) {
ctx.font = fontStringMain;
} else {
ctx.font = fontStringSubTitle;
}
ctx.save();
ctx.fillStyle = "#546a6f";
ctx.fillText(
el,
labelItem.translation[0],
labelItem.translation[1] + labelItem.textOffset + offset
);
ctx.restore();
offset +=
elTextMetrics.fontBoundingBoxAscent +
elTextMetrics.fontBoundingBoxDescent;
});
}
}
};