使用自行上傳統計資料

使用自行上傳統計資料繪製時序地圖

本範例示範如何將使用者自行上傳之統計資料繪製出時序統計地圖，配合統計地圖之分級符號圖
進行繪製；或者選擇輸出某一行政區歷年之統計資訊折線圖，設定完其線寬及顏色即可繪出，若
沒設定顏色的話則代入系統預設之顏色。您可以直接將本範例複製至您的網站伺服器，再修改使
用統計資料項目或統計地圖/圖表類型即可快速建立一個頁面。

版型設定部分：

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

網頁設計部分：

本範例在左側提供三個選單區塊，提供使用者進行資料設定、統計參數設定與匯出圖表功能。需
注意範例中欲繪製之資料項目，其選項中的value值需填入正確之數值，而對於欲匯入自有資料
之使用者來說，其資料來源設定即為匯入自有統計資料之XML檔案。

<td class="items_content">自有統計資料：</td>

<td><a href="http://segisapi.moi.gov.tw/StatAPI/sample/ex6.xml"target="_blank">自有統計資料.xml
</a></td>

因資料為使用者自行匯入，其相關之空間統計單元、統計欄位，以及時間區間皆需設定，請確認
各資訊皆屬於上一步驟之資料表，並將選項的value值填入。

<td class="items_content">空間單元層級：</td>

<td>

</select>

</td>

</tr>

<tr>

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

<td>

<option value="COLUMN2" selected>大陸港澳配偶</option>

</select>

</td>

</tr>

<tr>

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

<td>

</select>

</td>

</tr>

若使用者覺得目前系統預設之分級方式不符合需求，可新增分級方式為「自訂間距」，使用者只需
在分類法選項中新增一選項，並在分級數中由小至大依序於陣列內輸入分級區間，設定方式如下：

<td>

</select>

</td>

</tr>

<tr>

<td >

</select>

由小至大依序於陣列內輸入分級區間<br />例：輸入100, 300, 700, 900

</span>

</td>

</tr>

程式設計部分：

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

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

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

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

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

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;

mapOpts.pSymbol.outlineWidth = document.getElementById("lineWidth").value;

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

mapOpts.pSymbol.minSize = document.getElementById("minSize").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()); //設定統計資料

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

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

chartOpts. pLine.width = parseInt(document.getElementById("pSize ").value);

//重設折線圖之線寬

if (document.getElementById("pieColorList").value != "")

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

//重設折線圖配色

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

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

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

});

}

關於統計柱狀圖之橫軸資料標記，使用者可在chartOpts統計圖表參數設定中之各圖表參數集合
中進行設定，以折線圖為例，其參數設定集合為pLine，詳細說明可參考基本範例中之「繪製統計
圖表-折線圖」。

var pLine = {

xAxis: XAxis.TIME, //以時間作為折線圖橫軸標記

width: 1

};