Google Visualization API (8) - Creating Visualizations Events

Triggering an Event
在視覺效果中可以呼叫 google.visualization.events.trigger 來觸發事件. 這個功能需要幾個參數:

1. 視覺效果來源(通常使用 this)
2. 事件名稱(string)
3. 事件明細(Object). 一個指定事件明細的選擇性 map(name/value)

底下這個例子示範視覺效果如何處理 select 事件: MyVisualization.prototype.onclick = function(rowIndex) { this.highlightRow(this.selectedRow, false); // Clear previous selection this.highlightRow(rowIndex, true); // Highlight new selection // Save the selected row index in case getSelection is called. this.selectedRow = rowIndex; // Trigger a select event. google.visualization.events.trigger(this, 'select', null); };
Event Listeners
使用 google.visualization.events.addListener() 可以為視覺效果註冊事件. 這個方法需要一個物件, 一個聆聽事件, 一個被呼叫的方法. 底下這些示範每一次這在表格列上點擊時會出現提醒. 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
支援選取的視覺效果應該具備:

1. 當使用者選取視覺效果時必須觸發一個名為 'select' 的事件. 這個事情不需要其他屬性.
2. 提供 getSelection() 方法. 這方法回傳使用者選取的 data 的索引. 回傳值是一個陣列, 裡面的每個內容都有 row 跟 column 屬性. 而 row 跟 column 就是資料在 DataTable 裡面的索引值.
3. 提供 setSelection(selection) 方法. 這方法也是回傳選取的陣列. 當這方法呼叫的時候, 視覺效果應該在顯示上表示出被選取的項目. 實作 setSelection() 時不可以觸發到 select 事件.
   視覺效果可以忽略部分的選取. 例如一個表格限定只選取一整列時, 就可以忽略每一格或是每一欄的選取.