c3图表数据标签重叠问题

Question

我正在使用C3.js创建带有数据标签的折线图。

问题是，当来自2条线的数据彼此非常接近时，某些标签会重叠。

有没有办法解决C3中的数据重叠问题

var chart = c3.generate({
    data: {
        labels:true,
        columns: [
            ['data1', 30, 20, 50, 40, 60, 230],
            ['data2', 40, 130, 90, 240, 130, 220],
            ['data3', 20, 200, 160, 400, 250, 250]
        ]
    }
});

http://jsfiddle.net/e60o24d0/238/

Answer 1

没有内置方法可以这样做 但您可以尝试在 标签格式函数 中识别并转移有问题的标签：

labels: {
    format: function(v, id, point, line) {
        if (point === undefined || line === undefined) return;

        var label = d3
            .selectAll('.c3-chart-text')
            .selectAll('.c3-text')[line][point];

        if (...) { // set your condition
            var shift = ...; // set your calculation
            d3.select(label)
                .style('transform', 'translateY(' + shift + 'px)');
        }

        return v;
    }

可以在your updated fiddle中找到一些灵感。