[英]How I can change the font-family of labels in the bar chart?
I'm using Chart.js library to create a chart, and now I'm trying to change the labels font-family to Montserrat.我正在使用 Chart.js 库创建图表,现在我正在尝试将标签字体系列更改为蒙特塞拉特。 It worked for ticks, but not for the labels and the X-axe:它适用于刻度,但不适用于标签和 X 轴:
Here is my configuration:这是我的配置:
var doughnutChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Blue', 'Red', 'Yellow', 'Green'],
datasets: [
{
backgroundColor: ['#059CFF', '#FF6384', '#FFD673', '#22CECE'],
data: pieChartData[1].data,
},
],
},
options: {
responsive: false,
legend: {
display: false,
labels: {
fontFamily: 'Montserrat, sans-serif',
fontColor: 'red'
}
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
fontFamily: 'Montserrat, sans-serif',
},
},
],
},
},
});
How can I change the font-family of the labels at the bottom?如何更改底部标签的字体系列?
JSFiddle : https://jsfiddle.net/t7bzg9aL/ JSFiddle : https://jsfiddle.net/t7bzg9aL/
Looks like you're missing the x-axis font settings:看起来您缺少 x 轴字体设置:
var doughnutChart = new Chart(ctx, {
...
scales: {
...
xAxes: [
{
ticks: {
fontFamily: 'Montserrat, sans-serif',
},
},
],
},
},
});
Here is the demo: https://jsfiddle.net/mbratch/wxgry4p2/1/这是演示: https://jsfiddle.net/mbratch/wxgry4p2/1/
But you could set the default font for the whole chart if that's the desired result:但是,如果这是所需的结果,您可以为整个图表设置默认字体:
Chart.defaults.global.defaultFontFamily = 'Montserrat, sans-serif';
var doughnutChart = new Chart(ctx, {
... // no need to set font family in here
});
Demo: https://jsfiddle.net/mbratch/wxgry4p2/2/演示: https://jsfiddle.net/mbratch/wxgry4p2/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.