如何在Chart.js折线图中为每个Y轴对应的X轴添加黑色边框

需求：为每个Y轴对应的X轴边缘添加黑色边框，且边框起始于X轴的0值位置。（代码中实际还有y3和y4轴，此处仅展示y1和y2）

原scales配置代码：

scales: {
    x: {
        type: "linear",
        position: "left",
        max: this.res.maxs[0],
        min: 0,
        gridLines: {
            display: true,
        },
    },

    y1: {
        type: "linear",
        position: "left",
        stack: "demo",
        stackWeight: 1,
        max: this.res.maxs[4],
        min: 0,
        title: {
            display: true,
            text: this.axisLabels[3],
            font: {
                size: 11,
            },
        },
    },
    y2: {
        type: "linear",
        position: "left",
        stack: "demo",
        stackWeight: 1,
        grid: {
            borderColor: "blue",
        },
        max: this.res.maxs[2],
        min: -10,
        title: {
            display: true,
            text: this.axisLabels[1],
            font: {
                size: 11,
            },
        },
        ticks: {
            callback: (value, index, values) =>
                index == 0 ? undefined : value.toFixed(1),
        },
    }
}

解决方案 #

方式一：通过Y轴grid配置实现 #

直接在每个Y轴的grid选项中开启边框并设置样式，确保对齐X轴0点：

scales: {
    x: {
        type: "linear",
        position: "bottom", // 建议修正X轴位置为底部，符合常规图表布局
        max: this.res.maxs[0],
        min: 0,
        grid: {
            display: true,
            drawBorder: false // 关闭X轴自身边框，避免与Y轴边框冲突
        },
    },
    y1: {
        type: "linear",
        position: "left",
        stack: "demo",
        stackWeight: 1,
        max: this.res.maxs[4],
        min: 0,
        title: {
            display: true,
            text: this.axisLabels[3],
            font: {
                size: 11,
            },
        },
        grid: {
            drawBorder: true, // 开启垂直边框
            borderColor: 'black', // 设置黑色边框
            borderWidth: 2, // 可选，调整边框粗细
            offset: false // 确保边框对齐X轴0值位置
        }
    },
    y2: {
        type: "linear",
        position: "left",
        stack: "demo",
        stackWeight: 1,
        max: this.res.maxs[2],
        min: -10,
        title: {
            display: true,
            text: this.axisLabels[1],
            font: {
                size: 11,
            },
        },
        ticks: {
            callback: (value, index, values) =>
                index == 0 ? undefined : value.toFixed(1),
        },
        grid: {
            drawBorder: true,
            borderColor: 'black',
            borderWidth: 2,
            offset: false
        }
    },
    // y3、y4轴复制上述y1的grid配置即可
}

方式二：自定义插件绘制边框 #

如果配置方式无法满足需求，可通过Chart.js插件手动绘制精准的边框：

// 在图表配置中添加插件
plugins: [{
    afterDraw: (chart) => {
        const ctx = chart.ctx;
        const xAxis = chart.scales.x;
        // 列出所有需要添加边框的Y轴
        const targetYAxes = [chart.scales.y1, chart.scales.y2, chart.scales.y3, chart.scales.y4];
        
        ctx.save();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        
        targetYAxes.forEach(yAxis => {
            // 获取X轴0值对应的像素坐标
            const x0Position = xAxis.getPixelForValue(0);
            // 获取当前Y轴的上下边界像素坐标
            const yTop = yAxis.top;
            const yBottom = yAxis.bottom;
            
            // 绘制垂直边框
            ctx.beginPath();
            ctx.moveTo(x0Position, yTop);
            ctx.lineTo(x0Position, yBottom);
            ctx.stroke();
        });
        
        ctx.restore();
    }
}]

方式一配置简单，适合常规场景；方式二灵活性更高，可自定义边框的长度、样式等细节。

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