我正在尝试更改标题中的一个词，使其看起来像这样:
带有斜体单词的示例标题
但目前我唯一能得到的是所有文本都是粗体或所有文本都是斜体。
我需要将科学名称以斜体显示，并以粗体显示整个标题。
Chart.js documentation on titles 不提供设置自定义格式的方法，甚至不提供 fontStyles 数组来设置具有不同样式的不同行，并且使用 html 或 markdown 也不起作用，它只是按原样使用字符串。
我想知道是否有一种方法可以通过回调甚至插件来实现，因为到目前为止我还没有找到任何一种方法。
无效示例:Codepen
options: {
title: {
display: true,
text:
'Example <i>title<i> for *italic* word',
fontSize: 18, //Tamaño de letra del titulo
}
}
最佳答案
要管理标题的样式，您需要使用 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>关于javascript - 有没有办法将部分标题更改为另一种字体样式或在 Chart.js 中设置自定义标题格式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63063882/