使用資料平台XY坐標點位資料

使用資料服務平台XY坐標點位資料繪製時序地圖

本範例示範如何將資料服務平台之XY坐標點位資料繪製出時序統計地圖，搭配繪製統計地圖之
分級符號圖；或者改選擇繪出統計資訊柱狀圖。在統計圖表參數中，設定完其最大柱高、柱寬及
顏色即可繪出，若沒設定顏色的話則代入系統預設之顏色陣列。您可以直接將本範例複製至您的
網站伺服器，再修改使用統計資料項目或統計地圖/圖表類型即可快速建立一個頁面。

版型設定部分：

所有進階範例的版型皆以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「自應用
資料庫繪製地圖及圖表」中的「使用資料服務平台統計資料」。使用者可透過修改此檔案來更改
範例版型中各個區塊的樣式設定。

網頁設計部分：

本範例在左側提供三個選單區塊，提供使用者進行資料設定、統計參數設定與匯出圖表功能。需
注意範例中欲繪製之資料項目，其選項中的value值需填入正確之統計表代碼，代碼之查詢可利用本網頁右上方之「API應用資料庫查詢」得知。

<td>

<option value="">特殊教育學校校別概覽</option>

</select>

</td>

由於統計地圖-分級符號圖僅可設定單一欄位進行繪製，因此在這個選單就使用單一選單方式來取
得欄位資訊，以及選擇多項時序年度，須確認所有加入的統計欄位都屬於上一步驟設定的統計主題，並將選項的value值填入正確的欄位代碼即可。

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

<td>

<option value="STU_CNT" selected>特殊教育學校學生數</option>

</select>

</td>

</tr>

<tr>

<td class="items_content" valign="top">選擇時序年度：</td>

<td>

</select>

</td>

若使用者覺得目前系統預設之分級方式不符合需求，可新增分級方式為「自訂間距」，使用者只需
在分類法選項中新增一選項，並在分級數中由小至大依序於陣列內輸入分級區間，設定方式請參
考「繪製時序統計地圖」中之「使用共通平台統計資料」。

程式設計部分：

若使用者欲使用機構別(XY點位)之坐標資料統計的話，需先在dataOption來源統計資料物件中
進行設定，DataType及DataLevel皆需設定為相對應之LOCATE與ORG，其他設定請參考基本範例中的「匯入統計地圖API應用資料庫」。

var dataOption = { //設定來源統計資料

dataType: DataType.LOCATE, //設定統計資料類型，LOCATE表示XY坐標點

timeOpts: timeOpts,

dataLevel: DataLevel.ORG //設定資料層級類型，ORG為機構別

}

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

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

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

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

document.getElementById("downloadBtn").style.right = "120px";

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

myChart.getStatData().select.districtType = DistrictType.COUNTY;

myChart.getStatData().select.districtCode = [document.getElementById
("countySelect").value];

var mapOpts = myMap.getMapOptions();

mapOpts.pSymbol.classifyMethod = document.getElementById("pClassify").value;

//重新設定分級方式

mapOpts.pSymbol.classes = parseInt(document.getElementById("pClassesCount").value);

//重新設定分級數

if (document.getElementById("pClassify").value == ClassifyMethod.USER_DEFINED){

if(document.getElementById("pClassesCount_Self").value =="") {

alert("自訂區間必須填入值");

return;

} else {

mapOpts.pSymbol.userLevels = document.getElementById
("pClassesCount_Self").value.split(",");

}

mapOpts.pSymbol.symbolStyle = document.getElementById("symbolType").value;

mapOpts.pSymbol.fillColor = document.getElementById("fillColor").value;

mapOpts.pSymbol.outlineColor = document.getElementById("lineColor").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 ="";

document.getElementById("downloadBtn").style.right = "10px";

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

myChart.getStatData().select.districtType = DistrictType.COUNTY;

myChart.getStatData().select.districtCode = [document.getElementById("countySelect").value];

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

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

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

//重設柱狀圖最大柱高與柱寬

if (document.getElementById("pieColorList").value != "") //重設柱狀圖配色

chartOpts.pBar.color = document.getElementById("pieColorList").value.split(",");

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

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

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

});

}