如何在chart.js 3.x中更改字体大小，只填充图表标题
如何在chart.js 3.x中更改字体大小，只填充图表标题
提问于 2021-12-13 16:25:06
我试图减少填充和增加标题文本字体大小，我去了几个例子，但似乎不起作用。即使将参数放置在多个位置。
const labels1_1 = ['1','2','3', '4', '5','6','7', '8','9+'];
const data1_1 = {
labels: labels1_1,
datasets: [{
label: 'Trucks',
data: [1,2,3, 4, 5,6,7, 8,9],
backgroundColor: '#4472C4',
borderColor: '#4472C4',
borderWidth: 1
}]
};
const config1_1 = {
type: 'bar',
data: data1_1,
options: {
title:{
padding:5,
fontSize:18
},
plugins: {
title: {
display: true,
text: 'Number of SS vs Number of Trucks',
padding:5,
fontSize:18
},
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: '#3472C4'
},
},
scales: {
y: {
display:true,
beginAtZero: true,
title: {
display: true,
text: 'SS'
}
},
}
},
};
const myChart1_1 = new Chart(
document.getElementById('myChart1_1'), config1_1);我通过了https://www.chartjs.org/docs/2.8.0/configuration/title.html，但没有帮忙。此外，如何在全球范围内提及它，以便所有的标题都有更大的字体。课文：“党卫军的数量与卡车的数量”是标题。
回答 2
Stack Overflow用户
发布于 2022-10-02 04:33:05
标题选项在v2 of Chartjs中有了很大的发展。我发现标题是完全隐藏的，直到我添加了填充物，例如
options: {
plugins: {
title: {
display: true,
text: "Title" ,
padding: {
top: 10,
bottom: 10
},
font: {
size: 24,
style: 'italic',
family: 'Helvetica Neue'
}
}
},
... other options here
}Stack Overflow用户
发布于 2021-12-13 17:11:18
它不起作用的原因是因为您正在查看2.8.0版本的文档，正如您在url中看到的那样，最新版本是3.6.2，并对v2进行了一些突破性的更改。
要调整字体属性，需要在标题配置中的字体对象中定义它们，如下所示：
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Number of SS vs Number of Trucks',
font: {
size: 30
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70337807
复制相关文章
相似问题
腾讯云开发者
