Event Listeners
Google Visualization API 處理事件的時候是使用 google.visualization.events 這個命名空間裡的共用函數去註冊 event listeners. 每一個實作 Visualization API 的視覺效果都會有一些觸發的事件. 例如 OrgChart 就有一個 select 事件.
使用 google.visualization.events.addListener() 可以為某個物件加上指定的 event listeners. 例如, 底下個範例就是在每次 click 表格的時候出現提醒對話框.
<![CDATA[
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
google.visualization.events.addListener(table, 'select', selectHandler);
function selectHandler() {
alert('A table row was selected');
}
]]>
* 這裡有範例 當你看到這行字 表示程式出錯了 *
The Select Event
某些視覺效果的觸發事件是該視覺效果獨有的, 也有些事件是視覺效果共同有的.
select 事件就是一個通用事件, 每個可被選取的視覺效果應該使用同樣的方法來處理選取事件.
支援選取的視覺效果有底下這些特性:
- 當使用者選取視覺效果上的資料時, 會觸發名稱為 'select' 的事件.
- 提供
getSelection() 方法. 使用者選取資料的時候會傳回該資料的索引. 而這個方法傳回資料陣列, 每個項目裡有 row 和 column 屬性的物件. row 和 column 代表 DataTable 裡的索引.
如果 row 和 column 都代表選取了 cell, 如果只有 row 代表選取一整列, 如果只有 column 代表選取一整欄
- 提供
setSelection(selection) 方法, 可以傳入陣列, 裡面的每個項目都有 row 和 column 的屬性. 呼叫這個方法的時候, 視覺效果應該在外觀上指出新的選取項目. 實作 setSelection() 時候不會觸發 select 事件
這個範例會再選取 table 的時候, 跳出提醒對話框:
<![CDATA[
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
google.visualization.events.addListener(table, 'select', selectHandler);
function selectHandler() {
var selection = table.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
message += '{row:' + item.row + '}';
} else if (item.column != null) {
message += '{column:' + item.column + '}';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
}
]]>
* 這裡有範例 當你看到這行字 表示程式出錯了 *
這個範例是兩個 chart 之間的選取效果:
<![CDATA[
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {});
var org = new google.visualization.OrgChart(document.getElementById('org_div'));
org.draw(data, {});
google.visualization.events.addListener(table, 'select', function() {
org.setSelection(table.getSelection());
});
google.visualization.events.addListener(org, 'select', function() {
table.setSelection(org.getSelection());
});
]]>
* 這裡有範例 當你看到這行字 表示程式出錯了 *
* 這裡有範例 當你看到這行字 表示程式出錯了 *
發表文章
