多變數統計圖表

多變數統計圖表

在本範例中，我們將提供RWD設計之圖台樣板，並搭配以統計地圖API繪製多變數之統計圖來進

行開發。本範例使用共通平台資料庫之統計資料，搭配統計地圖之柱狀圖以及多變數折線圖功能進

行繪製，配合客製化的欄位選單、柱狀圖設定等參數來建立功能選單介面，您可以直接將本範例複

製至您的網站伺服器，再修改使用的統計資料項目或統計地圖/圖表類型來快速建立一個網頁圖台。

版型設定部分：

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

網頁設計部分：

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

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

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

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

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

<table>

<tr>

</tr>

<tr>

<td>

<optionvalue="3A1FA_A1B81">行政區移民諮詢服務項目統計</option>

</select>

</td>

</tr>

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

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

<tr>

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

<td>

</select>

</td>

</tr>

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

<td>

<optionvalue="101Y05M">101年5月</option>

………………………………..

</select>

</td>

繪圖設定則依據使用者選擇之繪圖類型，顯示其相對應之繪圖參數。

<td>

</select>

</td>

……………………

程式設計部分：

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

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

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

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

setStatData();

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

var pWidth = document.getElementById("bWidth").value;

var pBar = {

barWidth: pWidth, //設定最大柱寬

chartView: false, //設定顯示詳細圖表

color: tColorList //設定柱狀圖配色

};

var option = {

pBar: pBar

};

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

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

map.drawMap(function (result) {

myStatResult = result;

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

putInfomation(result);

div_mask(false); //結束遮罩

}); //繪製統計地圖

}

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

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

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

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

setStatData();

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

var tStyleList = (document.getElementById("StyleList").value).split(",");

var pLine = {

xAxis: XAxis.TIME,

data: XAxis.SPATIAL,

yMin: parseFloat(document.getElementById("Minvalue").value),

yMax: parseFloat(document.getElementById("Maxvalue").value),

yInterval: parseFloat(document.getElementById("interval").value),

width: 3,

lineStyles: tStyleList, //設定折線樣式

color: tColorList //設定配色

};

var option = {

pLine: pLine,

infoOpts: { //互動式視窗參數設定

activateMode: $("#infoEvent").val(),

infoColor: "#" + $("#infoBgColor").val(),

opacity: parseInt($("#infoOpacity").val()) / 100

}

};

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

var chart = new StatChart(containerObj, dataDB, ChartKind.LINE, Option);

chart.drawChart(function (result){});

}