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

Question

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

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/