互動式網頁介面

互動式網頁介面

互動式網頁之設計不同於一般傳統之靜態統計圖表，可讓使用者以動態展示統計資訊，並且能比靜態圖表產示出更多資訊，
本範例將說明與互動式網頁相關之參數設定，並教導如何建置「互動式網頁介面」。

開發者在進行繪製統計地圖/圖表時，可對互動式視窗設定是否顯示詳細圖表、視窗之觸發效果、背景色以及視窗透明度，
相關參數說明如下：

1. 訊息視窗中顯示詳細圖表

此項設定僅適用於統計地圖圓餅圖及統計地圖柱狀圖，使用者可設定是否在互動式訊息視窗中顯示資料之詳細圖表，

預設為false。

2. 互動式效果觸發模式設定

預設為滑鼠移動即觸發(MOUSEMOVE)，可設定之類型有:滑鼠移動 (MOUSEMOVE)、滑鼠經過 (MOUSEOVER)、

滑鼠點擊 (CLICK)、滑鼠雙擊 (DBLCLICK)。

3. 訊息視窗背景色

互動訊息視窗背景色設定，格式為16進位RGB(#RRGGBB)，預設為白色(#FFFFFF)。

4. 訊息視窗透明度設定

視窗透明度設定，可填入0~1之間的小數，預設為不透明 (1)。

其程式碼寫法如下：

1. 於設定統計地圖柱狀圖參數(或是圓餅圖設定參數)時，加入參數選擇是否要呈現詳細圖表

var pBar = {

chartView: document.getElementById("ChartView").checked //設定顯示詳細圖表

};

2. 於設定統計地圖參數時，加入訊息視窗客製化參數

var option = {

pBar: pBar,

infoOpts: { //訊息視窗內容設定

activateMode: pMapActivate, //觸發效果設定

infoColor: document.getElementById("InfoColor").value, //背景色

opacity: document.getElementById("InfoOpacity").value //透明度

}

};

3. 在繪製統計地圖時指定承接互動式介面的DIV ID

function DrawStatMap(data) { //統計地圖繪製

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

var Map = new StatMap(containerObj, data, MapKind. BAR, option); //繪製統計地圖

Map.drawMap(function (result){});

}

4. 在<body>網頁內容中放置互動式介面DIV，並設定其樣式屬性

</body>