統計圖表-多變數柱狀圖

繪製統計圖表-多變數柱狀圖

「多變數柱狀圖」與一般之「柱狀圖」呈現方式與參數設定大致相同，可設定之參數請參考繪製統計圖表-柱狀圖，
唯其資料設定與配色可以陣列方式設定之，繪製出多變數柱狀圖，配色設定亦會由原本之填入不同資料柱，變為填入
不同之欄位資料柱中。

另外，使用者亦可自訂想要之圖表標題，僅需在chartOpts統計圖表參數中增加一chartTitle參數即可。

程式碼如下：

   function init() {     

           var dataSet = new Array();

           var tmp = {

                   tableName: "3A1FA_A1C1",

                   fieldsId: [ "F_CNT","M_CNT"]                       //以陣列填入欲呈現之欄位代碼

                };

   dataDB = new DataDB(dataSet, dataOption, CoordSystem.EPSG3826, areaSelect);

}

   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]   //設定柱狀圖配色

           };

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

                   chartTitle: "104年6月-五都男女人口數統計",                      //自訂圖表標題設定

                   pBar: pBar

           };

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

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

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

   }