C3 图表数据标签自定义对齐

Question

在我的应用程序中，我使用 c3 图表实现了带线的分组条形图。为了在分组条上实现线条，我使用相同的条值来绘制叠加线并使用 css.

隐藏该线的数据 table

但是剩下的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;
}

Answer 1

不要使用 css 隐藏图例项，而是使用图例的 c3 配置语法：

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

http://c3js.org/reference.html#legend-show（legend-hide 是下面那个但是它的锚点 link 坏了）

C3 图表数据标签自定义对齐

C3 charts data label custom alignment

html

css

jquery

c3.js