如何在甜甜圈傳奇中顯示C3.js中的值？

Question

這里有一個簡單的示例屏幕截圖，您可以在其中看到圓環圖。

是否有可能在圖表的圖例中顯示真實值（不是％計算的值），如屏幕截圖中標有紅色箭頭的那樣？

每個人都希望在觀看圖像時知道“22.7％的內容”，那么是否有任何解決方案可以顯示數據行的總和（如我在屏幕截圖中假設它 - 箭頭）或者可能是所有數據的完整總和 - 行？

問候，

弗洛里安

Answer 1

您可以使用D3選擇器手動編輯/調整圖例文本，如下例所示。 但是，根據您更改的文本，您可能還必須修改標簽的大小/位置，即進一步進入D3操作。 但只是做一個基本的更改，請參閱代碼示例。

當然，您也可以在生成圖表之前設置系列的名稱（數組的第零項），這樣就不需要任何D3操作。 我在下面的第二個系列/列中完成了這個。

 var cols = [ ['data1', 30], ['data2', 120], ]; cols[1][0] = "Category C: " + cols[1][1]; var chart = c3.generate({ data: { columns: cols, type : 'donut' }, donut: { title: "Iris Petal Width" } }); d3.selectAll(".c3-legend-item-data1 text").text("Changed") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id='chart' />