【发布时间】：2019-09-06 18:31:40
【问题描述】：
我使用的是 Chart.js 版本：2.7.3
我的图表标题有三行。我想让第一行字体大小为 16，然后第二个 14 和第三个 12。我不确定这是否可能并且还没有找到方法。
这是我的代码的一部分，它定义了我的图表的选项...
options: {
title: {
display: true,
// Supply the title as an array and each array index prints on a separate line in the title section
text: ['My Chart','Last Month', 'Local Time'],
fontSize: 16,
callbacks: {
drawTitle: function(pt, vm, ctx, opacity) {
console.log("title.length: " + title.length);
var title = vm.title;
if (title.length) {
ctx.textAlign = vm._titleAlign;
ctx.textBaseline = 'top';
var titleFontSize = vm.titleFontSize;
var titleSpacing = vm.titleSpacing;
ctx.fillStyle = mergeOpacity(vm.titleFontColor, opacity);
ctx.font = helpers.fontString(titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
var i, len;
for (i = 0, len = title.length; i < len; ++i) {
ctx.fillText(title[i], pt.x, pt.y);
pt.y += titleFontSize + titleSpacing; // Line Height and spacing
if (i + 1 === title.length) {
pt.y += vm.titleMarginBottom - titleSpacing; // If Last, add margin, remove spacing
}
}
}
}
}
},
我知道您可以指定“fontSize”，但这适用于图表标题中的所有文本。我想为每一行文本使用不同的字体大小。我尝试指定回调，但在签入 Chrome F12 开发工具时没有看到 console.log() 消息。
Chart.js 中有没有办法为图表标题中的每一行指定不同的字体大小？
谢谢！
解决方案更新
我接受了 Edi Carlos 的回答，因为它提供了有关如何将格式化文本附加到画布元素的有用建议，并且这可以在 Chart.js 动画回调中完成。
我的图表是启用了工具提示的散点图。使用公认的解决方案，将鼠标悬停在绘图点上时，fillText 可能会消失或更改屏幕上的位置。我发现如果我使用 F12 Chrome 开发工具，文本也会消失。在接受的答案中的 jsfiddle 中也会发生同样的情况...如果您启用工具提示...尝试将鼠标悬停在条形图上或按 F12。
要在将鼠标悬停在 ToolTip 上时阻止 fillText 移动位置，我发现我必须指定：
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
为了阻止 fillText 在按下 F12 时消失，我发现我必须使用绝对位置设置画布元素的 CSS 样式。
#canvas{
position:absolute;
}
这是我的 Chart.js 选项中的一段代码，显示了如何为 Chart.js 图表标题中的每一行文本指定不同的字体大小和样式：
options: {
animation: {
onProgress: function(animation) {
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
// Set the font size and text position for the 2nd row in the Chart title
ctx.font = "bold 14px 'Helvetica Neue', Helvetica, Arial, sans-serif";
ctx.fillStyle = "#666";
ctx.fillText("Last 24 Hours", 610, 32);
// Set the font size and text position for the 3rd row in the Chart title
ctx.font = "bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif";
ctx.fillStyle = "#666";
ctx.fillText("Local Time | Limit=None", 610, 53);
}
},
title: {
display: true,
text: ['Sensor Chart',' ', ' '],
fontSize: 16
}
}
Chart.js 允许您提供一个字符串数组作为标题。然后每个数组索引打印在单独的行上。我在文本中留了空格：[] 数组索引 1 和 2，所以图表标题中会有空格来定位 ctx.fillText()。
建议添加到 Chart.js
总的来说，这仍然是一种略显老套的方式。我认为 Chart.js 应该有一个更集成的解决方案。就像您可以指定多个 y 轴一样，每个 y 轴都有自己的属性：
yAxes: [
{
id: 'A',
..
..
},
{
id: 'B',
..
..
}
]
如果您可以为图表标题中的多行指定样式，那就太好了：
title: {
display: true,
titleRows: [
{
id: 'A',
text: 'Row1',
fontSize: 16,
..
},
{
id: 'B',
text: 'Row2',
fontSize: 14,
..
},
{
id: 'C',
text: 'Row3',
fontSize: 12,
..
}
]
}
【问题讨论】：
标签： javascript chart.js