C3圖表數據標籤自定義對齊

Question

在我的應用程序中，我使用c3圖表實現了一個分組條形圖。爲了在分組條上實現這一行，我使用了一個條的相同值來繪製疊加行並使用css隱藏該行的數據表。

但剩下的2個數據標籤不會在居中對齊。如何解決這個問題？

JSFiddle

JS代碼：

var chart = c3.generate({ 
    data: { 
     x : 'Year', 
     columns: [ 
      ['Year', '2007', '2008', '2009', '2010','2011','2012','2013','2014','2015','2016'], 
      ['test1', 20, 20, 25, 35, 45, 50, 50,55, 58, 58], 
      ['test2', 80, 81,76, 66, 56, 51, 50, 46, 44, 44], 
      ['Line Data', 20, 20, 25, 35, 45, 50, 50,55, 58, 58] 
     ], 
     groups: [ 
      ['test1', 'test2'] 
     ], 
     type: 'bar', 
     types: { 
      'Line Data': 'line' 
     }, 
     colors: { 
      'test1': '#c0c0c0', 
      'test2': '#d4b012', 
      'Line Data': '#000' 
     } 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     }, 
     y : { 
      tick: { 
       format: function (d) { return d+"%"; } 
      } 
     } 

    }, 
    grid: { 
     y: { 
      show: true 
     } 
    } 
}); 

HTML代碼：

<div id="chart"></div> 

CSS代碼：

g .c3-legend-item.c3-legend-item-Line-Data,.c3-tooltip-container .c3-tooltip-name--Line-Data { 
    display: none; 
} 

Answer 1

而不是隱藏的CSS是圖例項目，使用爲說明C3配置語法：

... 
grid: { 
    y: { 
     show: true 
    } 
} 
legend: { // add this bit 
    hide: ['Line Data'], 
} 

http://c3js.org/reference.html#legend-show（圖例隱藏低於一個但其錨鏈接是損紙）