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で見つけることができます。