C3图表数据标签自定义对齐
问题描述:
在我的应用程序中,我使用c3图表实现了一个分组条形图。为了在分组条上实现这一行,我使用了一个条的相同值来绘制叠加行并使用css隐藏该行的数据表。C3图表数据标签自定义对齐
但剩下的2个数据标签不会在居中对齐。如何解决这个问题?
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;
}
答
而不是隐藏的CSS是图例项目,使用为说明C3配置语法:
...
grid: {
y: {
show: true
}
}
legend: { // add this bit
hide: ['Line Data'],
}
http://c3js.org/reference.html#legend-show(图例隐藏低于一个但其锚链接是损纸)