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:

中识别和移动有问题的标签

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 中找到一些灵感。

c3图表数据标签重叠问题

c3 chart data label overlap issue

javascript

charts

c3.js