[英]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.