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

Question

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

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

我也可以设置解决方案，是一种隐藏表示小时数的每个刻度的方法，但保留工具提示。

我已经尝试过按空字符串代替时间，但是不幸的是，这也禁用了工具提示，并且无法告知时间微粒值。

（chart.js ver2.8.0）

CODE：

 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,
},
});

Answer 1

您可以为xAxes fontColor使用数组，请参见示例：

<canvas id="graph-canvas" width="800" height="400"></canvas>

<script>
data = {
    labels: ["26 Apr","27 Apr","28 Apr","29 Apr","30 Apr","01 May","02 May","03 May"],
    datasets: [{
        label: "total",
        data: [2, 3, 4, 2, 3, 5, 6, 3]
        }]
};

var ctx = document.getElementById("graph-canvas");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    **fontColor**:['rgba(44,44,44,0.8)','rgba(44,44,44,0.8)','rgba(44,44,44,0.8)','rgba(178,31,31,1)','rgba(44,44,44,0.8)','rgba(44,44,44,0.8)','rgba(44,44,44,0.8)','rgba(44,44,44,0.8)'],
                    callback: function(tickValue, index, ticks) {
                        return tickValue;
                    }
                }
            }]
        }
    }
});
</script>