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/