javascript - 有什么方法可以更改 Chartjs 3.0.0 中标签的字体颜色和大小
问题描述
使用 chart.js 3.0.0 测试版
看来他们还没有实施任何方法来更改标签的字体属性(下面的自包含示例中的 Volume 和 Month )
我尝试了几种方法,但似乎这是不可能的
需要明确的是,我要更改颜色的是标签,而不是标题或数据集。
谁能证实这一点?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.12/chart.js"></script>
</head>
<body>
<div id="container" style='background-color:white' >
<canvas id="canvas"></canvas>
</div>
<script>
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
data: [ 50, -90, 75, 40, -100, 220, 11 ]
}]
},
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false,
labels:{
fontSize: 20,
fontColor: 'red',
}
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: 'Volume',
fontColor:'#666',
fontSize: 20,
fontStyle: 'italic'
}
},
y: {
display: true,
scaleLabel: {
display: true,
labelString: 'Month',
fontColor:'#666',
fontSize: 20,
fontStyle: 'bold'
}
}
}
}
});
};
</script>
</body>
</html>
解决方案
v3 中的属性名称已更改,请参阅迁移指南 ( https://www.chartjs.org/docs/master/getting-started/v3-migration ) 和字体文档 ( https://www.chartjs.org/docs /master/general/fonts)了解更多信息:
例子:
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: {
size: 20
},
color: 'red',
}
}
}
}
}
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.0.0-beta.12/chart.js" integrity="sha512-KTkh8VBBRBzCXlXeR49sBgmLkU6CE7li47A70NR+yYMKGEDOfQR4L2PEQ3KRXeET8j1U+gSRpRjkAS4tQjTGag==" crossorigin="anonymous"></script>
</body>
推荐阅读
- python - Python:如何使用可扩展的 numpy 数组成员创建对象
- go - golang是否有像'as'这样的运算符(C#)
- mysql - 选择从 Mysql 获取帖子评论数的最佳方式
- laravel - Laravel 路由模型绑定和回退
- apache-kafka-connect - Kafka-Connect:源和接收器可以使用相同的主题吗?
- asp.net-core - 无法执行 dotnet swagger 命令
- android-studio - 导航抽屉 TextView Nullpointer 异常
- java - Spring Boot MongoDB 事务回滚
- sql - 使用 XSD 架构检查 XML
- c++ - 从 C++ 中的 std::function 访问模板化 lambda