如何使用 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/

如何使用 C3.js 在饼图图例项文本中显示百分比值？

How Can I display % value in Pie chart Legend Item text using C3.js?

c3.js