互動式視窗之詳細圖表呈現

互動式視窗之詳細圖表呈現

 

在本範例中，我們將提供RWD設計之圖台樣板，並搭配以統計地圖API繪製含詳細圖表之統計地圖
來進行開發。本範例使用資料服務平台資料庫之統計資料，搭配統計地圖之圓餅圖功能進行繪製，配
合客製化的欄位選單、圓餅圖設定等參數來建立功能選單介面，您可以直接將本範例複製至您的網站
伺服器，再修改使用的統計資料項目或統計地圖/圖表類型來快速建立一個網頁圖台。

 

版型設定部分：

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

 

網頁設計部分：

除了最上方的標題區塊之外，本範例提供一選單區塊作為網頁使用者的主要操作區域，可進行統計資

料選擇、統計參數設定、執行按鈕的點擊等等，右側則是結果展示區域，繪製完成的統計地圖、統計

圖表及其他相關輸出內容都會在這個區塊呈現。所有可供網頁使用者進行操作的選單，都以下拉選單

或多選清單的方式呈現，如統計產品選擇下拉選單，您可自行增減選單內的項目，僅須確認選項的value

值必須填入正確的統計資料表代碼即可。

 

        <div id="dateQueryMenu" class="QueryMenuDIV"style="overflow-y:auto;">

                <table>

                        <tr>

                                <td class="items_content"colspan="2">選擇資料：</td>

                        </tr>

                        <tr>

                                <td>產品選擇：</td>

                                <td>

                                        <select id="sTable"class="items_selectOption" disabled="">

                                                <optionvalue="A57FA_12C2">行政區歲入來源別統計</option>

                                        </select>

                                </td>

                        </tr>

 

統計欄位選擇的部分，設定為多項欄位變數進行統計圖繪製，因此此選單使用多選清單的方式來

進行欄位選擇，您同樣可以自行增減選單的項目，僅須確認所有加入的統計欄位都必須屬於上一
步驟設定的統計產品，並將選項的value值填入正確的欄位代碼即可。

                                <td valign="top">使用統計欄位：</td>

                                <td>

                                        <select id="sField"class="items_selectOption" style="width:160px" size="3"multiple="" >

                                                <option value="COLUMN1"selected="">稅課收入</option>

                                                <option value="COLUMN2"selected="">規費收入</option>

                                                <option value="COLUMN3"selected="">罰款及賠償收入</option>

                                                <option value="COLUMN4"selected="">補助及協助收入</option>

                                                <option value="COLUMN5">財產收入</option>

                                        </select>

                                </td>

時間選擇的部分，亦設定為複選選單，需確定統計時間代碼與產品項目相符。

                    <td>統計時間：</td>

                                <td>

                                        <select id="sTime"class="items_selectOption" style="width:160px" size="3"multiple="">

                                                <option value="100Y"selected="">101年</option>

                                                <option value="101Y"selected="">101年</option>

                                                <option value="102Y"selected="">102年</option>

                                        </select>

                                </td>

繪圖設定則依據使用者選擇之繪圖類型，顯示其相對應之繪圖參數，並預設勾選呈現詳細圖表選項。

                        <tr>

                                <td >圓餅大小：</td>

                                <td>

                                        <select id="pSize"class="items_selectOption items_width100">

                                        </select>

                                </td>

                        </tr>

                        <tr>

                                <td>自定顏色：</td>

                                <td>

                                        <input type="text" value=""id="ColorList" class="items_content2"><br>

                                        <span class="items_Span"id="Span1">例：輸入 #FF0000,#00FF00,#0000FF

                                        </span>

                                </td>

                        </tr>

                        <tr id="trdetailchartView">

                                <td></td>

                                <td >

                                        <input id="detailchartView"type="checkbox" checked="" />是否顯示詳細圖表

                                </td>

                        </tr>

 

程式設計部分：

當網頁使用者點擊「繪製統計地圖」按鈕時，程式端即進入function drawStatMap( )內進行一
系列的動作，包含從網頁介面取得各種資料設定、繪圖參數設定等等，再將所有設定套入統計地
圖物件設定內容後進行統計地圖繪製作業，最後將互動式介面輸出至網頁的展示區域內，並寫出
所需的統計資訊。

 

function drawStatMap() {       //統計圖繪製

        document.getElementById("chartViewContainer").style.display = "none";

        div_mask(true); //啟動畫面遮罩

        setStatData();

        var tColorList = (document.getElementById("ColorList").value).split(",");

        var pSize = document.getElementById("pSize").value;

        var pPie = {

                size: pSize,              //設定圓餅大小

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

                color: tColorList    //設定圓餅圖配色

        };

        var option = {

                pPie: pPie

        };

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

        var map = new StatMap(containerObj, dataDB, MapKind.PIE, option);

        map.drawMap(function (result) {

                myStatResult = result;

                if (result.status === ServiceStatus.OK)

                        putInfomation(result);

                div_mask(false);            //結束遮罩

});     //繪製統計地圖

}

function setStatData() {                           //統計資料設定撈取

        mType = document.getElementById("mType").value;

        timeList = getMultiOpts(document.getElementById("sTime"));

        dataDB.option.timeOpts.time = timeList;

        dataDB.dataSet[0].tableName = document.getElementById("sTable").value;

        dataDB.dataSet[0].fieldsId = getMultiOpts(document.getElementById("sField"));

        dataDB.select.districtCode = getMultiOpts(document.getElementById("pRegionCode"));

        if(document.getElementById("sLevel").value =="COUNTY"){

                dataDB.option.dataLevel = DataLevel.COUNTY;

        }

}