C3图表设置标签Y轴位置：解决双列标签重叠问题

云原生阿岚

2026-5-28

解决C3.js折线图标签重叠：固定系列标签位置

当然可以实现！要让Col1的标签始终在折线上方、Col2的标签始终在折线下方，我们可以借助C3.js标签的format函数，通过返回带样式的HTML文本，给不同系列的标签设置固定的垂直偏移，彻底避免重叠问题。

实现思路

C3.js的标签支持返回HTML元素，我们可以利用SVG的tspan标签的dy属性来控制标签的垂直位置：

给Col1的标签设置负的dy值，让标签向上偏移，固定在折线上方
给Col2的标签设置正的dy值，让标签向下偏移，固定在折线下方

修改后的完整代码

var chart1 = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['Col1', -0.7, -0.1, 4.6, -2.0, 4.2, 4.3, 5.4, 5.0, 0.6, 4.2, 4.9, 2.8, 2.7],
            ['Col2', -1.5, -0.9, 4.0, -2.5, 3.7, 4.0, 5.1, 4.8, 0.6, 4.2, 4.9, 2.8, 2.7]
        ],
        labels:{
            format: function(value, id, index) {
                // 根据系列ID设置不同的垂直偏移，数值可根据图表大小微调
                const offset = id === 'Col1' ? '-10' : '10';
                return `<tspan dy="${offset}">${value}%</tspan>`;
            }
        }
    },
    axis: {
        x: {
            type: 'category',
            categories: ['Feb-17', 'Mar-17', 'Apr-17', 'May-17', 'Jun-17', 'Jul-17', 'Aug-17', 'Sep-17', 'Oct-17', 'Nov-17', 'Dec-17', 'Jan-18', 'Feb-18']
        },
        y: {
            show: false,
            min: -8,
            max: 8
        },
    },
    grid: {
        y: {
            lines: [{ value: 0 }]
        }
    },
    size: {
        height: 240
    }
});