使用資料服務平台統計資料

使用資料服務平台統計資料

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

版型設定部分：

所有進階範例的版型皆以CSS文件進行設定，您可以參考範例附帶的「sample.css」檔案，並
透過修改此檔案來更改範例版型中各個區塊的樣式設定。以本範例的最上方標題區塊為例，您可
以修改「.title」區段來改變標題區塊的樣式，包含背景圖片、標題字體、字體大小、顏色、區塊
大小等等。

.title {

font-family: Microsoft JhengHei;

font-size: 36px;

font-weight: bold;

color: #333333;

height: 83px;

background-color: #A1D8E8;

background-image: url("banner.png");

background-repeat: no-repeat;

}

網頁設計部分：

除了最上方的標題區塊之外，本範例左側提供三個選單區塊作為網頁使用者的主要操作區域，可
分別進行統計資料選擇、統計參數設定、執行按鈕的點擊等等，右側則是結果展示區域，繪製完
成的統計地圖、統計圖表及其他相關輸出內容都會在這個區塊呈現。所有可供網頁使用者進行操
作的選單，都以下拉選單或多選清單的方式呈現，如統計產品選擇下拉選單，您可自行增減選單
內的項目，僅須確認選項的value值必須填入正確的統計資料表代碼即可。

<td>

<option value="A57FA_A1C3">行政區三段年齡組人口比率</option>

</select>

</td>

統計欄位選擇的部分，由於統計地圖-圓餅圖可設定多個欄位進行統計圖繪製，因此在這個選單
就使用多選清單的方式來取代下拉選單只能進行單一項目選擇的問題，您同樣可以自行增減選單
的項目，僅須確認所有加入的統計欄位都必須屬於上一步驟設定的統計產品，並將選項的value
值填入正確的欄位代碼即可。

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

<td>

<option value="COLUMN1" selected>幼年人口比率(0-14歲)</option>

<option value="COLUMN2" selected>青壯年人口比率(15-64歲)</option>

<option value="COLUMN3" selected>老年人口比率(65歲以上)</option>

</select>

</td>

程式設計部分：

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

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

document.getElementById("mapView").style.display = "";

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

setStatData(myMap.getStatData()); //設定統計資料

var mapOpts = myMap.getMapOptions(); //取得統計地圖參數設定

mapOpts.pPie.size = document.getElementById("pSize").value; //重新設定圓餅尺寸

mapOpts.pPie.color = new Array();

mapOpts.pPie.color.push(document.getElementById("pColor1").value); //重新設定圓餅配色

mapOpts.pPie.color.push(document.getElementById("pColor2").value);

mapOpts.pPie.color.push(document.getElementById("pColor3").value);

myMap.drawMap(function (result) { //繪製統計地圖

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

putInfomation(result); //寫出統計資訊及圖例資訊

});

}

當網頁使用者點擊「繪製統計圖表」按鈕時，同樣程式即進入function drawStatChart( )內執行
統計圖表繪製作業，取得所有設定參數後，套用設定參數並將成果輸出至展示區域內。

function drawStatChart() { //統計圖表繪製

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

document.getElementById("chartView").style.display = "";

setStatData(myChart.getStatData()); //設定統計資料

var chartOpts = myChart.getChartOptions(); //取得統計圖表參數設定

//重設柱狀圖最大柱高

chartOpts.pBar.maxHeight = parseInt(document.getElementById("bHeight").value);

//重設柱狀圖柱寬

chartOpts.pBar.barWidth = parseInt(document.getElementById("bWidth").value);

myChart.drawChart(function (result) { //繪製統計圖表

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

putInfomation(result); //寫出統計資訊及圖例資訊

});

}