統計地圖-圓餅圖

繪製統計地圖-圓餅圖

 

本項目將針對統計地圖之「圓餅圖」呈現方式做詳細之參數設定介紹,
提醒:圓餅圖適合用於呈現正值資料,當資料有負值時,則可能會出現比例失真的情形。

圓餅圖可設定之參數如下:

1. 圓餅大小設定

單位為pixel,若未設定則系統將自動計算適合大小後套用。

2. 配色設定

以陣列方式輸入16進位RGB(#RRGGBB)格式之配色集合,輸出之圓餅圖將依照配色

集依序填入各個資料分塊。若未設定則系統將自動進行配色。

3. 顯示詳細圖表設定

是否在互動式訊息視窗中顯示詳細圖表,預設為false

 

程式碼如下:

 

                        function DrawStatMap(data) {                                    //統計地圖繪製

                                var pSize = document.getElementById("size").value;

                                var pColorA = document.getElementById("ColorA").value;

                                var pColorB = document.getElementById("ColorB").value;

                                var pColorC = document.getElementById("ColorC").value;    //可互動式參數設定

                               

                                var pPie = {

                                        size: pSize,                                                      //設定圓餅大小

chartView: document.getElementById("chartView").checked,
        //
設定顯示詳細圖表

                                        color: [pColorA, pColorB, pColorC]          //設定圓餅圖配色

                                };

                                var Map = new StatMap(containerObj, data, MapKind.PIE, option);

                                Map.drawMap(function (result){});            //繪製統計地圖

                        }

回到上方