NO IMAGE

本文介紹如何監聽圖表的處理事件。

內容

概述

Google charts 可以建立你需要監聽的事件。事件可以由使用者的動作觸發,例如當使用者點選一個圖表時。你可以註冊一個Javascript方法當某些動作被觸發時來呼叫,可以有資料來強調事件。

每個圖表都定義了自己的事件,對圖表的宣告需要描述要呼叫的時間,也就是說,如何得到與時間關聯的資訊。這篇文章描述如何從圖表註冊獲取事件,以及如何處理事件。

有一個事件是任何可選擇的圖表都要呼叫的:選擇事件。但是,這個事件的行為和意義由每個圖表定義。

很重要的一點是,圖表的事件是和標準DOM事件獨立的。

註冊和處理一個事件

註冊你的事件處理器,你需要呼叫google.visualization.events.addListener() 或者 addOneTimeListener() 帶有圖表名,要監聽的事件的字串名,以及當事件要引用時呼叫的函式的名字。你的函式需要傳遞一個單一變數:event變數。這個event變數可以有在圖表宣告中描述的關於事件的傳統資訊。

重要:如果你的圖表有一個 ready
event
, 你應該一直等待那個事件被呼叫,直到你要從那個圖表傳遞方法或者接收動作。這些圖表應該在它們丟擲一個ready事件之前工作,但是這個行為是沒有保證的。

如下的程式碼片段展示了每次使用者點選一個表格的行就會彈出一個提示框:

DataTable.getValue() 或者getFormattedValue().
如果 row 和 column 都被宣告, 選擇的元素是一個單元。如果只有row 被宣告,選中的物件是一行。如果只有t column 被宣告,選中的物件是一列。
  • 圖表應該呼叫方法setSelection(selection) 來改變隱藏圖表的選擇和圖表相應資料的選擇。選中的元素是一個類似getSelection() 陣列的陣列,每一個元素都是一個有  row 和 column屬性的物件。 row 屬性定義了 DataTable 中的指定行, column 屬性定義 DataTable中指定列。當方法被呼叫時,圖表應該指出是哪個新的選擇。 setSelection() 不應該觸發一個“選擇”動作。
  • 下面的例子是當選中一個表格的元素,彈出提示框:

    <iframe class="framebox inherit-locale " src="https://developers.google.com/chart/interactive/docs/events_2d3ea45d3700fd6e4290b02dcfa3a3ba.frame?hl=zh-cn" style="box-sizing: inherit; border-width: 0px; border-style: initial; width: 856px; height: 250px;"></iframe>

    Note that the table chart only fires row selection events; however, the code is generic, and can be used for row, column, and cell selection events.

    這裡是處理函式的例子:

    goog.visualization.errors 幫助函式幫助你給使用者展示錯誤。

    錯誤事件處理語法

    function myErrorHandler(err){...}

    錯誤書劍處理器應該有如下成員的物件傳遞:

    • id [必須] - DOM 元素的ID包含圖表,或者一個如果圖表不能顯示展示的錯誤資訊。
    • message [必須] - 一個描述錯誤的簡訊息字串。
    • detailedMessage [可選] - 一個錯誤的詳細解釋。
    • options [可選]- 一個包含適合錯誤和表格類別的傳統引數。

    事件處理的例子

    如下的例子用了getSelection()和setSelection()。它同步了使用相同資料的兩個圖表的選擇。點選某一個圖表來同步另一個圖表。 

    // Create our two charts.
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {});

    var orgchart = new google.visualization.OrgChart(document.getElementById('org_div'));
    orgchart.draw(data, {});

    // When the table is selected, update the orgchart.
    google.visualization.events.addListener(table, 'select', function() {
      orgchart.setSelection(table.getSelection());
    });

    // When the orgchart is selected, update the table chart.
    google.visualization.events.addListener(orgchart, 'select', function() {
      table.setSelection(orgchart.getSelection());
    });

    點選下面的圖表或者圖表元素檢視選擇的動作: