[英]Chart.js, change color of specific ticks
我有一个图表,刻度几乎无法区分。
有没有办法针对特定刻度并更改颜色、字体大小或背景,以使其更显眼?
我也可以设置的解决方案是隐藏指示小时的每个刻度但保留工具提示的方法。
我试图用空字符串代替时间,但不幸的是,这也禁用了工具提示,并且无法告诉微粒值的时间。
代码:
var chartDatesArray = ["NOV 25","01:00","02:00","03:00"... "23:00","Nov 26"];
var chartCountArray = [10,20,30,40...50,60];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartDatesArray,
datasets: [
{
data: chartCountArray,
backgroundColor: gradient,
borderColor: "rgb(27,163,198)",
fill: true,
lineTension: 0,
radius: 1,
borderWidth: 2,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
],
},
options: {
scales: {
xAxes: [{
ticks: {
display: true,
fontSize: 12,
},
gridLines: {
display: true,
drawBorder: false,
}
}],
yAxes: [{
ticks: {
precision: 0,
display: true,
fontSize: 12,
beginAtZero: true
},
gridLines: {
display: true,
drawBorder: true,
}
}]
},
legend: {
display: false,
labels: {
fontSize: 12,
},
},
tooltips: {
enabled: true,
intersect: false,
},
display: true,
responsive: true,
maintainAspectRatio: false,
},
});
您可以为 xAxes fontColor 使用数组,请参见示例:
<canvas id="graph-canvas" width="800" height="400"></canvas>
<script>
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
label: "My First dataset",
backgroundColor:
[ "rgba(255,99,132,0.4)",
"rgba(255,99,132,0.4)",
"rgba(255,99,132,0.4)",
"rgba(25,25,255,0.4)",
"rgba(25,25,255,0.4)",
"rgba(25,25,255,0.4)"],
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55],
}
]
};
var option = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
},
}],
xAxes: [{
ticks: {
fontColor:['green','red','blue','yellow','green','red'],
callback: function(value, index, values) {
if(index === 3) {
return '**'+value+'**';
}
else {
return value;
}
}
},
}]
}
};
var myBarChart = Chart.Line(canvas,{
data:data,
options:option
});
</script>
这是一个小提琴
对于 Chart JS 3.5.1,我的配置中有这个:
{
options: {
scales: {
x: {
ticks: {
color: ['black', 'black', 'blue']
}
}
}
}
}
我正在使用 TypeScript,看起来输入不正确,所以我不得不// @ts-igone
它,以便它可以接受字符串列表。
结果如下:
希望这对将来的某人有用,但这是我能够做到的方式:
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
text: 'Minutes from start',
display: true
}
},
y: {
type: 'linear',
display: true,
position: 'left',
suggestedMax: 14,
title: {
text: 'pH',
display: true
},
ticks: {
color: (c) => {if(c['tick']['value'] == 7) return 'red'; else return 'black';}, // this here
},
},
在刻度的刻度部分,您可以在 color 属性中创建一个函数,该函数将根据刻度返回颜色
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.