javascript - ChartJS 仅显示特定刻度的大字体
问题描述
如果满足特定条件,我试图强调 X 轴上的特定值。
例如,在我的codepen中,我只想更改“蓝色”条的字体大小。Chart.js 甚至可以做到这一点吗?
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
ticks: {
//only show large font size for 'Blue'
fontSize: 16
}
}]
}
}
});
解决方案
根据他们的文档,这似乎是不可能的。您只能使用回调函数执行大写所需标签之类的操作
xAxes: [{
ticks: {
fontSize: 16,
callback: v => v === 'Blue' ? v.toUpperCase() : v
}
}]
推荐阅读
- amazon-web-services - 如何解决terraform中的数据源问题
- android - Android Kotlin Range 滑块以编程方式设置值
- python - Python,Django float() 参数必须是字符串或数字,而不是 'NoneType
- swift - 没有模型铸造的模型的初始值如何快速
- python - 用没有类关键字的 html 创建一个字典或数据框
- javascript - Drupal8/9 jQuery 选择带有上下文的 DOM 元素
- php - 基于数组中相同相同ID的php求和值
- altair - 在一组 vstacked 图中隐藏特定 Altair 图中的网格
- mongodb - 将 MongoDB 查询转换为雪花
- maven - Maven 测试在本地运行但在 github 操作中失败