改變C3.js 圓餅圖 文字的位置

2018/03/12 10:32 羅光男 JavaScript C3.js

---

C3.js 是一個用來產生圖表的工具，如長條圖，摺線圖，圓餅圖等等

這次碰到的是需要把C3圓餅圖的文字拉到外面去顯示

 

查過文件發現C3 本身並沒有支援將文字移動的功能，經過google後 找到比較多人使用的方法

 

首先先設定基本的計算公式

 var w = 197;  //不確定此處的w跟h指的是哪個區塊
 var h = 160;  //
 var r = Math.min(w, h) / 2;   //位移的計算公式
 var labelr = r + 30 //位移的計算公式

再使用D3.js找出 圖形中文字的位置，並帶入計算公式 將文字移出 圖形

 d3.selectAll(".c3-chart-arc text").each(function (v) {
            var label = d3.select(this);
            var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g);  //文字原本的位置
            var x = pos[0]; //x軸
            var y = pos[1]; //y軸
            var h = Math.sqrt(x * x + y * y);
            // pos[0] is x, pos[1] is y. Do some position changes and update value
            label.attr("transform", "translate(" + (x / h * labelr) + "," + (y / h * labelr) + ")"); //帶入計算公式並改變文字的位置
            label.style("fill", "#313131"); //Colorarray Labels
        });

最後呈現的樣子,雖然文字式往外移了 但css還是需要再做微調 還是會有跑版的可能

20180326補充

發現位移後文字會有被不明區塊截斷的問題