我正在使用Chart.js版本：2.7.3
我的图表标题有三行。我想使第一行的字体大小为16，然后使第二行的字体大小为12，第三行的字体大小为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”，但这适用于图表标题中的所有文本。我想为每一行文本使用不同的fontSize。我尝试指定回调，但在检入Chrome F12 devtools时看不到console.log（）消息。
Chart.js中是否可以为图表标题中的每一行指定不同的fontSize？
谢谢！
我接受了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应该有一个更集成的解决方案。类似的方式，您可以使用以下方法指定多个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,
..
}
]
}
答案 0 :(得分：3)
您可以使用Chart.js版本2.7.3的 fillText（）方法
使用fillText（）在画布上编写“网络！” 和“ Stackoverflow” （带有渐变）：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Network", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Stackoverflow", 10, 90);
fillText（）方法在画布上绘制填充文本。文本的默认颜色是黑色。 使用font属性指定字体和字体大小，并使用fillStyle属性以另一种颜色/渐变呈现文本。
我的Fiddle示例
更新 -> 您可以使用动画回调（onProgress或onComplete）来执行此操作，例如：
options: {
animation: {
onProgress: function(animation) {
// code above
}
}
}
更新2-> 完整代码
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [2, 2, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
animation: {
onProgress: function(animation) {
var c = document.getElementById("myChart");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("1 - Network", 45, 30);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("2 - Stackoverflow", 45, 70);
}
}
}
});
完整的Fiddle
希望对您有帮助！