在 chartjs 中更改饼图和折线图中标签的字体系列
Change font family of labels in piechart and linechart in chartjs
我想更改折线图和饼图中的图例和标签字体,我该怎么做?
我几乎尝试了一切,但不幸的是没有任何效果
我尝试以下方法:
<Pie
data={state}
defaultValue={resources.length + other}
plugins={{
//@ts-ignore
font: {
weight: 'bold',
size: 100,
family: 'IranYekanFa',
}
}}
options={{
title: {
display: true,
text: "",
fontColor: 'rgb(160,0,255)',
fontSize: 30,
fontFamily:"IranYekanFa",
},
legend: {
labels: {
fontFamily:"IranYekanFa !important" ,
}
},
animation: {
duration: 0, // general animation time
},
}}
/>
甚至尝试 css :
.piechart-parent-div{
font-family:"IranYekanFa" !important;
}
没有任何效果!
由于字体没有改变,看来您正在使用 V3,V3 有一些重大的制动变化,例如比例如何定义和命名空间的变化,您的标题和图例配置是否在错误的位置,以及您的方式定义字体错误,所有更改请阅读 migration guide.
更改字体的工作示例:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
font: {
family: 'Comic Sans MS',
}
}
},
},
scales: {
x: {
ticks: {
font: {
family: 'Comic Sans MS'
},
reverse: false
}
}
}
}
}
var 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.5.1/chart.js"></script>
</body>
我想更改折线图和饼图中的图例和标签字体,我该怎么做? 我几乎尝试了一切,但不幸的是没有任何效果 我尝试以下方法:
<Pie
data={state}
defaultValue={resources.length + other}
plugins={{
//@ts-ignore
font: {
weight: 'bold',
size: 100,
family: 'IranYekanFa',
}
}}
options={{
title: {
display: true,
text: "",
fontColor: 'rgb(160,0,255)',
fontSize: 30,
fontFamily:"IranYekanFa",
},
legend: {
labels: {
fontFamily:"IranYekanFa !important" ,
}
},
animation: {
duration: 0, // general animation time
},
}}
/>
甚至尝试 css :
.piechart-parent-div{
font-family:"IranYekanFa" !important;
}
没有任何效果!
由于字体没有改变,看来您正在使用 V3,V3 有一些重大的制动变化,例如比例如何定义和命名空间的变化,您的标题和图例配置是否在错误的位置,以及您的方式定义字体错误,所有更改请阅读 migration guide.
更改字体的工作示例:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
font: {
family: 'Comic Sans MS',
}
}
},
},
scales: {
x: {
ticks: {
font: {
family: 'Comic Sans MS'
},
reverse: false
}
}
}
}
}
var 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.5.1/chart.js"></script>
</body>