如何使用C3.js在饼图图例项目文本中显示％值？

Question

我创建了饼图，它工作正常。在饼图中，标签显示％值，它也很好。但现在我只想在Legend项目文本中显示％值。

var ChartDesignCreated = c3.generate({
    bindto: "#Chart1",
    data: {
        columns: [
            ['Football', 10)],
            ['Cricket', 10)],
        ],
        type: 'pie'
        }
    });

图例项目文本应显示为：

Football = 50%

Cricket = 50%

有可能吗？

感谢。

Answer 1

没有内置的方法可以做到这一点 但是，您可以在图表呈现之前将百分比放入数据标签文本中：

var columns = [
    ['data1', 30],
    ['data2', 120]
];

var total = columns.reduce(function(sum, item) {
    return sum + item[1]
}, 0);

columns = columns.map(function(item) {
    return [
        item[0] + ' = ' + d3.format('.1%')(item[1] / total),
        item[1]
    ]
});

var chart = c3.generate({
    data: {
        columns: columns,
        type : 'pie'
    }
});

https://jsfiddle.net/Dimmy/y2LLftx0/2/