統計地圖-柱狀圖

繪製統計地圖-柱狀圖

 

本項目將針對統計地圖之「柱狀圖」呈現方式做詳細之參數設定介紹,可設定之參數有:

1. 最大柱高設定

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

2. 柱寬設定

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

3. 配色設定

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

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

4. 顯示詳細圖表設定

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

 

程式碼如下:

 

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

           var pHeight = document.getElementById("maxHeight").value;

           var pWidth = document.getElementById("maxWidth").value;

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

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

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

          

           var pBar = {

                   maxHeight: pHeight,                                    //設定最大柱高

                   barWidth: pWidth,                                        //設定最大柱寬

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

                   color: [pColorA, pColorB, pColorC]          //設定柱狀圖配色

           };           

           var Map = new StatMap(containerObj, data, MapKind.BAR, option);  //繪製統計地圖

           Map.drawMap(function (result){});

           }

回到上方