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（图例隐藏低于一个但其锚链接是损纸）