繪製統計圖表-圓餅圖

本項目將針對統計圖表之「圓餅圖」呈現方式做詳細之參數設定介紹，

提醒：圓餅圖適合用於呈現正值資料，當資料有負值時，則可能會出現比例失真的情形。

圓餅圖表可設定之參數如下：

1. pies比例資料類型(必填)

設定比例資料類型，不可與data值相同，類型有：行政區/統計區/機構別(spatial)、
統計欄位(field)、時序(time)。

2. data 繪製資料類型(必填)

設定繪製資料類型，不可與pies值相同，類型有：行政區/統計區/機構別(spatial)、
統計欄位(field)、時序(time)。

3. size 圓餅大小設定

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

4. color 配色設定

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

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

程式碼如下：

           function DrawStatChart(data) {                                          //統計圖表繪製

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

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

                   var pColorC = document.getElementById("ColorC").value;

                   var pPie = {

                           pies: XAxis.SPATIAL,                                      //設定比例資料類型

                           data: XAxis.FIELD,                                          //設定繪製資料類型

                           size: document.getElementById("pSize").value,        //設定圓餅尺寸大小

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

                   };

                   var Option = {                                                       //統計圖表參數設定

                           pPie: pPie

                   };

                        var containerObj = document.getElementById("ChartView");       //指定互動式介面的DIV ID

                   var Chart = new StatChart(containerObj, data, ChartKind.PIE, Option);   //繪製統計圖表物件

                   Chart.drawChart(function (result){});

           }