觸發事件

您的示意圖可以觸發代管網頁可註冊接收的事件。 事件可由使用者動作觸發,例如使用者點擊圖表或內部動作,例如每 10 秒觸發一次事件。您可以註冊 JavaScript 方法,讓系統在每次發生特定事件 (可能使用特定事件的資料) 時呼叫該方法。

每項視覺呈現都會定義自己的事件,且該視覺化的說明文件應說明每個事件的啟動時間、意義,以及將何種資訊傳送至事件處理常式 (例如,請參閱機構圖視覺化)。本圖表說明視覺化創作者如何觸發事件。如要瞭解用戶端如何註冊接收事件,請參閱處理事件頁面。

任何可選取的視覺呈現應觸發一個事件:選取事件。不過,此事件的行為和意義都是由一張示意圖所定義。

如果在 draw 方法傳回控制項後,如果無法立即以視覺化方式進行互動,系統應以視覺化方式啟動視覺化事件:該事件的確切行為與意義請參閱就緒事件一節。

請注意,視覺化 API 事件與標準 DOM 事件是獨立且不同的。

目錄

觸發事件

如要透過視覺化方式啟動事件,請呼叫 google.visualization.events.trigger() 函式。這個函式預期的參數如下:

  1. 來源視覺化 (通常是 this 值)。
  2. 事件名稱 (字串)。
  3. 事件詳細資料 (物件)。特定事件詳細資料的選用地圖 (名稱/值)。

以下範例顯示以視覺化方式呈現的選取事件:

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(),藉此接收您的活動。 請務必完整記錄您啟用的任何事件。

選取事件

「選取」事件是許多視覺圖表根據使用者的滑鼠點擊而擲回的標準事件。如果您選擇按照滑鼠點擊來觸發事件,則應按照下列說明的標準方式導入「選取」事件:

  1. 使用者在視覺呈現中選取特定資料時,啟動名稱為「select」的事件。這個事件不會將任何引數傳送至監聽函式。
  2. 按照連結文件一節所述的方式公開 getSelection() 方法。這個方法應傳回使用者所選 data 元素的索引。
  3. 參考資料一節所述,公開 setSelection() 方法。另請參閱處理事件頁面,瞭解如何處理事件。

就緒事件

任何視覺化資料均應以「標準」方式啟動,該事件會以標準方式通知,以便在開發人員準備好處理已呼叫的方法時通知。然而,這種示意圖並沒有絕對的要求;請參閱說明文件,瞭解視覺化內容。

一般來說,公開「就緒」事件的視覺化設計應依照以下規格設計:

  • 就緒事件不會將任何屬性傳遞給處理常式 (您的函式處理常式不應傳送任何參數給處理常式)。
  • 圖表內容「必須」以視覺化方式呈現可視的互動。如果視覺化的繪圖具有非同步性質,請務必讓系統在能夠呼叫互動方法時觸發事件,而不只是在 draw 方法結束時觸發。
  • 請先呼叫事件監聽器,再呼叫 draw 方法。
  • 在就緒事件觸發之前呼叫互動方法,將導致這些方法無法正常運作。

慣例是,在 draw 方法結束之後,未觸發「就緒」事件的視覺化內容已可立即進行互動,並將控制項傳回給使用者。

更多資訊