热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Chart.js,更改特定刻度的颜色

我有一个图表,刻度几乎无法区分。有没有一种方法可以定位特定的刻度

我有一个图表,刻度几乎无法区分。

有没有一种方法可以定位特定的刻度线,并更改颜色,字体大小或背景,使其看起来更明显?

我还可以设置解决方案,那就是隐藏每个指示小时的刻度线,但保留工具提示。

我尝试将空字符串替换为时间,但不幸的是,这也禁用了工具提示,并且无法告知时间颗粒值。


chart.js ver2.8.0)

Chart.js,更改特定刻度的颜色

代码:

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


推荐阅读
author-avatar
5欣欣向荣_135
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有