統計圖表-柱狀圖

繪製統計圖表-柱狀圖

本項目將針對統計圖表之單一變數「柱狀圖」呈現方式做詳細之參數設定介紹，若需繪製多變數柱狀圖，

請參考範例繪製統計圖表-多變數柱狀圖，統計圖表-柱狀圖可設定之參數說明如下：

1. xAxis X軸資料類型(必填)

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

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

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

3. yMin 與 yMax 設定Y軸最小最大值(非必填)

自行設定Y軸最大最小值

4. yInterval 設定Y軸間距值(非必填)

自行設定Y軸間距值

5. barWidth 柱寬設定

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

6. color 配色設定

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

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

程式碼如下：

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

           var pBar = {                                                                   //建立柱狀圖參數設定集合

                   xAxis: XAxis.SPATIAL,                                            //設定X軸資料類型

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

                   yMin: parseFloat(document.getElementById("Minvalue").value),         //設定Y軸最小值

                   yMax: parseFloat(document.getElementById("Maxvalue").value),        //設定Y軸最大值

                   yInterval: parseFloat(document.getElementById("interval").value),      //設定Y軸間距值

                   barWidth: document.getElementById("maxWidth").value,     //設定最大柱寬

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

           };

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

                   pBar: pBar

           };

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

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

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

   }