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

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

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

版型設定部分：

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

網頁設計部分：

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

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

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

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

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

<table>

<tr>

</tr>

<tr>

<td>

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

</select>

</td>

</tr>

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

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

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

<td>

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

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

</select>

</td>

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

<td>

</select>

</td>

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

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td>

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

</span>

</td>

</tr>

<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;

}