您的示意圖可以觸發代管網頁可註冊接收的事件。 事件可由使用者動作觸發,例如使用者點擊圖表或內部動作,例如每 10 秒觸發一次事件。您可以註冊 JavaScript 方法,讓系統在每次發生特定事件 (可能使用特定事件的資料) 時呼叫該方法。
每項視覺呈現都會定義自己的事件,且該視覺化的說明文件應說明每個事件的啟動時間、意義,以及將何種資訊傳送至事件處理常式 (例如,請參閱機構圖視覺化)。本圖表說明視覺化創作者如何觸發事件。如要瞭解用戶端如何註冊接收事件,請參閱處理事件頁面。
任何可選取的視覺呈現應觸發一個事件:選取事件。不過,此事件的行為和意義都是由一張示意圖所定義。
如果在 draw
方法傳回控制項後,如果無法立即以視覺化方式進行互動,系統應以視覺化方式啟動視覺化事件:該事件的確切行為與意義請參閱就緒事件一節。
請注意,視覺化 API 事件與標準 DOM 事件是獨立且不同的。
目錄
觸發事件
如要透過視覺化方式啟動事件,請呼叫 google.visualization.events.trigger()
函式。這個函式預期的參數如下:
- 來源視覺化 (通常是
this
值)。 - 事件名稱 (字串)。
- 事件詳細資料 (物件)。特定事件詳細資料的選用地圖 (名稱/值)。
以下範例顯示以視覺化方式呈現的選取事件:
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; // Fire a select event. google.visualization.events.trigger(this, 'select', {}); };
您可以透過代管網頁的方式呼叫 google.visualization.events.addListener()
或 google.visualization.events.addOneTimeListener()
,藉此接收您的活動。
請務必完整記錄您啟用的任何事件。
選取事件
「選取」事件是許多視覺圖表根據使用者的滑鼠點擊而擲回的標準事件。如果您選擇按照滑鼠點擊來觸發事件,則應按照下列說明的標準方式導入「選取」事件:
- 使用者在視覺呈現中選取特定資料時,啟動名稱為「select」的事件。這個事件不會將任何引數傳送至監聽函式。
- 按照連結文件一節所述的方式公開
getSelection()
方法。這個方法應傳回使用者所選 data 元素的索引。
- 如參考資料一節所述,公開
setSelection()
方法。另請參閱處理事件頁面,瞭解如何處理事件。
就緒事件
任何視覺化資料均應以「標準」方式啟動,該事件會以標準方式通知,以便在開發人員準備好處理已呼叫的方法時通知。然而,這種示意圖並沒有絕對的要求;請參閱說明文件,瞭解視覺化內容。
一般來說,公開「就緒」事件的視覺化設計應依照以下規格設計:
- 就緒事件不會將任何屬性傳遞給處理常式 (您的函式處理常式不應傳送任何參數給處理常式)。
- 圖表內容「必須」以視覺化方式呈現可視的互動。如果視覺化的繪圖具有非同步性質,請務必讓系統在能夠呼叫互動方法時觸發事件,而不只是在
draw
方法結束時觸發。 - 請先呼叫事件監聽器,再呼叫
draw
方法。 - 在就緒事件觸發之前呼叫互動方法,將導致這些方法無法正常運作。
慣例是,在 draw
方法結束之後,未觸發「就緒」事件的視覺化內容已可立即進行互動,並將控制項傳回給使用者。