如何在Chart.js中修改指定Y轴的颜色（双Y轴折线图场景）

我用Chart.js制作了一个包含两个数据集的双Y轴折线图，现在需要修改其中一个Y轴的颜色。另外，X轴代表从1开始的测试次数，由于启用了autoSkip和maxTicksLimit属性，X轴最后一个刻度的位置不固定，有时无法与第二个Y轴对齐。注意：我不想修改网格线（gridLines）的颜色。

当前效果 #

X轴最后一个刻度未与右侧Y轴对齐，对应网格线颜色较浅

预期效果 #

X轴最后一个刻度与右侧Y轴对齐，对应网格线为深色

现有代码 #

const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color');
const subColor = rootStyles.getPropertyValue('--sub-color');
const data = {
    labels: [] as number[],
    datasets: [
        {
            label: 'WPM',
            data: [] as number[],
            fill: true,
            backgroundColor: mainColor,
            borderColor: mainColor,
            lineTension: 0.4,
            yAxisID: 'y',
        },
        {
            label: 'Accuracy',
            data: [] as number[],
            fill: true,
            backgroundColor: subColor,
            borderColor: subColor,
            lineTension: 0.4,
            yAxisID: 'y1',
        },
    ],
};

const options: any = {
    tooltips: {
        enabled: true,
        mode: 'label',
    },
    bezierCurve: true,
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            position: 'top',
            display: false,
            labels: {
                usePointStyle: true,
                font: {
                    size: 14,
                    family: 'lexend, sans-serif',
                },
            },
        },
        title: {
            display: false,
        },
    },
    interaction: {
        intersect: false,
    },
    scales: {
        x: {
            title: {
                display: true,
                text: 'Test',
                color: subColor,
                font: {
                    size: 16,
                    family: 'lexend, sans-serif',
                },
            },
            ticks: {
                autoSkip: true,
                maxTicksLimit: 10,
                font: {
                    family: 'lexend, sans-serif',
                },
                color: subColor
            },
            grid: {
                color: (context: any) => {
                    if (context.tick.value === data.labels[data.labels.length - 2] // here is the problem
                       || context.tick.value === 0)
                    {
                        return subColor
                    }
                    else {
                        return subColor + "15"
                    }
                },
            },
        },
        y: {
            min: 0,
            max: Math.max(...wpmData) > 150 ? 290 : 200,
            position: 'left',
            title: {
                display: true,
                text: 'Words per minute',
                color: subColor,
                font: {
                    size: 16,
                    family: 'lexend, sans-serif',
                },
            },
            ticks: {
                font: {
                    family: 'lexend, sans-serif',
                },
                color: subColor,

            },
            grid: {
                color: (context: any) => {
                    if (context.tick.value === 0) {
                        return subColor
                    }
                    else {
                        return subColor + "15"
                    }
                },
            },
        },
        y1: {
            position: 'right',
            max: 120,
            min: 0,
            title: {
                display: true,
                text: 'Accuracy',
                color: subColor,
                font: {
                    size: 16,
                    family: 'lexend, sans-serif',
                },
            },
            ticks: {
                font: {
                    family: 'lexend, sans-serif',
                },
                color: subColor,
            },
            grid: {
                color: (context: any) => {
                    if (context.tick.value === 0) {
                        return subColor
                    }
                    else {
                        return "transparent"
                    }
                },
            },
        },
    },
    elements: {
        point: {
            radius: 2,
        },
    },
};

1. 修改单个Y轴颜色 #

要修改指定Y轴的颜色，直接在对应Y轴的配置中添加color属性设置轴线颜色，同时可以同步调整标题、刻度文字的颜色保持视觉统一。比如修改右侧Y轴（y1）的颜色：

y1: {
    position: 'right',
    max: 120,
    min: 0,
    color: '#your-target-color', // 设置Y轴轴线颜色
    title: {
        display: true,
        text: 'Accuracy',
        color: '#your-target-color', // 标题颜色同步
        font: {
            size: 16,
            family: 'lexend, sans-serif',
        },
    },
    ticks: {
        font: {
            family: 'lexend, sans-serif',
        },
        color: '#your-target-color', // 刻度文字颜色同步
    },
    // 其他原有配置保留
}

2. 让X轴最后一个刻度对齐右侧Y轴 #

原代码中X轴网格线的判断逻辑依赖data.labels[data.labels.length - 2]，但autoSkip和maxTicksLimit会导致实际显示的最后一个刻度不一定是数组中的倒数第二个元素。

改用Chart.js提供的context.tick.isLast属性判断是否为当前显示的最后一个刻度，就能保证网格线和右侧Y轴对齐：

x: {
    // 其他原有配置保留
    grid: {
        color: (context: any) => {
            if (context.tick.isLast || context.tick.value === 0) {
                return subColor;
            } else {
                return subColor + "15";
            }
        },
    },
}

内容的提问来源于stack exchange，提问作者Rohith Nambiar