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找到。