動態組合輸出統計值繪製統計圖表

動態組合輸出統計值繪製統計圖表

在本範例中，我們將示範如何將時序性的統計地圖相關統計資料取出後，動態組合自有統計資料
XML檔，再繪製出統計圖表。透過這個範例，未來開發者可自行取出所需的統計資訊如平均值、
總和、標準差後再組合出新的統計資料進行二次繪製，可強化展示原有統計地圖背後隱藏的相關
資訊。

版型設定部分：

本進階範例的版型以CSS文件(sample2.css)進行設定，其詳細說明可參考進階範例「由指定地理位置
查詢鄰近統計資料」。使用者可透過修改css檔案來更改範例版型中各個區塊的樣式設定。
 

即時組合自有統計資料XML字串：

在完成時序統計地圖繪製後，我們可以從繪製統計地圖drawMap方法中的callback function內
取出result參數，再由result內的statInfo參數取出各時序的統計資料總和數值，加上資料內的
行政區名稱、行政區代碼、統計時間等資訊，再加上自訂之欄位名稱和代碼後，即可產出一新建
之自有統計資料字串。

var xml = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

                xml += '<dataOwn xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">';

                xml += '<statData>';

                xml += '<code>' + dataDB.select.districtCode[0] + '</code>';      //取出行政區代碼

                xml += '<name>' + regionCode[0]  + '</name>';                            //取出行政區名稱
                //使用for迴圈取出各時序之統計值總和資訊,建立新的欄位填入統計資料屬性值

                xml += '<fields>';                                                                                           

                for(var i = 0 ; i < request.statData.length ; i++){

                    xml += '<field>';

                    xml += '<f_ID>P_CNT</f_ID>';                 //設定欄位代碼

                    xml += '<f_name>總人口數</f_name>';          //設定欄位名稱

                    xml += '<time>' + request.statData[i].time + '</time>';       //寫入統計時間資訊

                    xml += '<value>' + request.statInfo[i].fields[0].sum + '</value>';      //寫入統計數值
                    //寫入統計單位

                    xml += '<unit>' + request.statData[0].tableData[0].timeData[0].value[0].unit + '</unit>';

                    xml += '</field>';

                }

                xml += '</fields>';

                xml += '</statData>';

                xml += '</dataOwn>';

使用XML字串建立自有統計資料設定集合：

當建立完統計資料XML字串後，即可透過自有統計資料設定的方式將XML字串餵入tableSrc
參數中，作為後續繪製統計圖表的資料來源。

var dataSet = new Array();      //建立空陣列, 準備納入統計資料設定集合

var tmp = {                                //建立統計資料設定

         tableSrc: xml,                   //將組合好的XML字串加入tableSrc, 建立統計資料

         fieldsId: ["P_CNT"]           //指定使用欄位

};

dataSet.push(tmp);