作者:5欣欣向荣_135 | 来源:互联网 | 2023-05-27 17:37
我有一个图表,刻度几乎无法区分。
有没有一种方法可以定位特定的刻度线,并更改颜色,字体大小或背景,使其看起来更明显?
我还可以设置解决方案,那就是隐藏每个指示小时的刻度线,但保留工具提示。
我尝试将空字符串替换为时间,但不幸的是,这也禁用了工具提示,并且无法告知时间颗粒值。
(
chart.js ver2.8.0)
代码:
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,1)",pointBackgroundColor: "#fff",pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: "rgba(75,pointHoverBorderColor: "rgba(220,220,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,beginAtZero: true
},drawBorder: true,}
}]
},legend: {
display: false,labels: {
fontSize: 12,tooltips: {
enabled: true,intersect: false,responsive: true,maintainAspectRatio: false,});
您可以为xAxes fontColor使用数组,请参见示例:
这里是see mysql doc here