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

【问题标题】：C3 charts data label custom alignmentC3图表数据标签自定义对齐
【发布时间】：2017-03-09 23:49:04
【问题描述】：

在我的应用程序中，我使用 c3 图表实现了一个带折线的分组条形图。为了在分组条上实现线，我使用相同的条值来绘制覆盖线并使用 css 隐藏该线的数据表。

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

【问题讨论】：

标签： jquery html css c3.js

【解决方案1】：

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

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

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

【讨论】：