我试图更改标题中的一个单词，使其看起来像这样：
带斜体单词的示例标题
但目前我唯一能得到的是全文本粗体或全文本斜体。
我需要把科学名称用斜体写，并把整个标题用粗体写。
关于标题的Chart.js文档没有提供一种设置自定义格式的方法，甚至没有提供一个fontStyles数组来设置不同风格的不同行，使用html或markdown也不起作用，它只是按原样使用字符串。
我想知道是否有办法通过回调甚至插件来实现这一点，因为到目前为止我还没有找到任何方法。
不起作用的示例：Codepen
options: {
title: {
display: true,
text:
'Example <i>title<i> for *italic* word',
fontSize: 18, //Tamaño de letra del titulo
}
}
从Chart.js v3开始，您现在可以为图表的title和subtitle添加不同的样式。因此，虽然你不能只斜体一个单词，但你可以只斜体字幕：
plugins: {
title: {
display: true,
text: 'Example Title'
},
subtitle: {
display: true,
text: 'Example Italic Subtitle',
font: {
style: 'italic'
}
}
},
title和subtitle的完整选项可在以下文档中找到：https://www.chartjs.org/docs/latest/configuration/title.html.
要管理标题的样式，您需要使用fontStyle，在本例中是在options.title:中
options: {
title: {
display: true,
text: 'Example <i>title<i> for *italic* word',
fontSize: 18, //Tamaño de letra del titulo
fontStyle:"italic"
},
}
代码段：
<!DOCTYPE html>
<html style="background-color: black;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap"
rel="stylesheet"
/>
</head>
<body class="">
<canvas
id="myChart"
width="1904"
height="400"
class="chartjs-render-monitor"
style="display: block; width: 1904px; height: 400px;"
>
</canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.defaults.global.defaultFontFamily =
'Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif'; //Tipo de letra
Chart.defaults.global.defaultFontSize = 14; //Tamaño de letra global
Chart.defaults.global.defaultFontColor = '#fff'; //Color de letra
var labels_1 = ['Test', 'Test', 'Test', 'Test'];
var data_1 = [10, 12, 25, 35];
var colors = [
'rgba(44,127,184, 1)'
];
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: labels_1,
datasets: [
{
label: '',
data: data_1,
backgroundColor: colors[0],
borderColor: colors[0],
borderWidth: 1,
fill: false,
},
],
},
options: {
title: {
display: true,
text:
'title in italic',
fontSize: 18, //Tamaño de letra del titulo,
fontStyle:"italic"
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
},
},
tooltips: {
callbacks: {
title: function (tooltipItem, data) {
var title =
data['labels'][tooltipItem[0]['index']];
title = title.toString();
title = title.split(',');
title = title.join('n');
return title;
},
label: function (tooltipItem, data) {
var value =
data.datasets[0].data[tooltipItem.index];
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
},
},
},
scales: {
yAxes: [
{
display: true,
ticks: {
beginAtZero: true,
},
scaleLabel: {
display: false,
labelString: 'No. de focos',
},
},
],
xAxes: [
{
display: false,
ticks: {
beginAtZero: true,
},
scaleLabel: {
display: false,
labelString: 'País',
},
},
],
},
legend: {
display: false,
},
},
});
</script>
</body>
</html>