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