Docs Menu
Docs Home
/
Atlas Charts
/
埋め込み
/
埋め込み SDK

クリック イベントの処理

項目一覧

  • 前提条件
  • クリック イベント構文
  • ペイロード
  • event 要素
  • data 要素
  • selectionFilter 要素
  • target 要素
  • 例
  • クリック イベントの基本的な処理
  • クリック イベントのインタラクティブ フィルタリング

注意

Charts 埋め込み SDK の [ イベント ] をクリックします はバージョン2 で利用可能です。1 。0以降に更新します。

Charts 埋め込み JavaScript SDK には、クリック イベントをサブスクライブできる クリック イベント ハンドラー が含まれています。 チャート上の特定の要素をクリックすると、クリックした要素の詳細がクリック イベント ハンドラーにキャプチャされます。 この機能を使用して、アプリケーション内で次のようなインタラクティブ エクスペリエンスを構築します。

  • チャート上の要素をクリックすると、クリックした要素の詳細が表示されるペインが開きます。

  • 別のグラフのフィルターを作成します。

前提条件

開始する前に、 は Charts埋め込み JavaScript SDK のバージョン2.1.0以降をインストールします。

クリック イベント構文

イベント ハンドラーは、イベントタイプ clickと、クリック イベントとクリックされた要素に関する情報を含むコールバック関数を単一のペイロードオブジェクトとして受け取ります。 クリック イベント ハンドラーの構文は次のようになります。

chart.addEventListener("click", callback);

イベント ハンドラーでは、イベント情報を受信するマーク ロールを定義することもできるため、ペイロードを確認する必要がなくなります。 フィルタリングするマーク ロールを定義するためのクリック イベント ハンドラーの構文は次のようになります。

const options = { includes: [{ roles: ['mark', 'axis-label'] }] };
chart.addEventListener("click", callback, options);

次の例に示すように、グラフのレンダリングが完了した後に、クリック イベント ハンドラーを追加する必要があります。

例

chart.render(document.getElementById("chart")).then(
     () => chart.addEventListener('click',
       (payload) => alert(JSON.stringify(payload)),
       options)
   );

注意

optionsパラメータを指定すると、クリックされたマークのロールが パラメーターで指定された値のいずれかと一致する場合にのみ、 クリック イベント ハンドラー はイベントをキャプチャします。 このパラメーターを省略すると、クリック イベント ハンドラーはチャート上のすべてのクリック イベントをキャプチャします。

ペイロード

クリック イベント ペイロードを使用して、アプリケーション内の他のチャートに適用できるカスタム フィルターを構築できます。 コールバック関数のペイロード オブジェクトの構文は次のようになります。

chart.addEventListener("click", (payload) => {
    // handle events
}

次のペイロード オブジェクトの例は、ペイロード内の要素を示しています。

例

{
  "chartId": "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "chartTitle": "This is my chart's title",
  "chartDescription": "This is my chart's description",
  "event": { // information about the mouse event. For example:
    "type": "click", // event type
    "altKey": false, // modifier keys
    "ctrlKey": false,
    "shiftKey": false,
    "metaKey": false,
    "offsetX": 152, // element coordinates
    "offsetY": 176,
    "clientX": 172, // coordinates from application viewpoint
    "clientY": 241,
    "pageX": 172, // coordinates relative to the page
    "pageY": 241,
    "screenX": 172, // coordinates relative to screen
    "screenY": 312
  },
  "data": { // information about the clicked chart element. For example:
    "y": {
      "label": "unwind array 'genres'",
      "value": "Adventure"
    },
    "x": {
      "label": "count ( _id )",
      "value": 659
    },
    "color": {
      "label": "year",
      "value": "2000 - 2010",
      "lowerBound": 2000,
      "upperBound": 2010
    }
  },
  selectionFilter: {
    // category data expressed as MQL filter query that
    // interactive filters would output to filter other charts.
    // For example:
    genres: 'Adventure',
    year: {
      $gte: 2000,
      $lt: 2010,
    },
  },
  "target": { // information about the clicked target. For example:
    "type": "rect", // type of mark, such as rect, line, etc.
    "role": "mark", // role of mark, such as mark, legend, etc.
    "fill": "#8CB6F2" // fill color of the mark
  },
  "apiVersion": 1 // API version of event payload
}

ペイロード オブジェクト内の要素の詳細については、以下を参照してください。

event 要素

ペイロードのevent要素には、次のようなマウス イベントに関する情報が含まれています。

  • マウス イベントのタイプ。次である必要があります: click

  • クリック イベントをtriggerするために使用される修飾子キー（altKey、ctrlKey、shiftKey、metaKey など）

  • XとYの座標は次のとおりです。

    • チャートのコンソール要素に対して相対的

    • アプリケーションの観点から

    • ページに相対的

    • 画面に対して

data 要素

ペイロードのdata要素には、クリックされたグラフ要素に関する情報が含まれています。 各エンコードされたデータフィールド（ x 、 y 、 series 、 intensity 、 color 、 shape 、 size 、 label 、 arc 、 value 、 target 、 number 、 display 、 text 、 location ）、 data要素には次のものが含まれます。

  • チャンネル label

  • クリックされた要素のvalue

  • 数値または日付のビン化の下限値のみ

テーブルの場合、Charts 埋め込み JavaScript SDK クリック イベント ハンドラーは、クリックされた要素のチャンネル データを表すフィールドのクリック イベントをキャプチャします。

  • groups フィールド（ラベルと値を含むすべてのグループ チャネルを含む）

  • cell フィールド（列ヘッダー ラベルとクリックされたセルの値を含む）

地理空間チャートの場合、Charts 埋め込み JavaScript SDK クリック イベント ハンドラーは、次の要素のクリック イベントをキャプチャします。

  • サンプル チャートの場合、クリック イベント ハンドラーは、クリックされた要素のチャンネル データを表すフィールドをキャプチャします。

    • lat フィールド（緯度を含む）

    • lng フィールド（経度を含む）

    • location フィールド（クリックされた地理空間領域のフィールド ラベルと値を含む）

  • 地理空間散布チャートの場合、クリック イベント ハンドラーは、クリックされた要素のチャンネル データを表すフィールドをキャプチャします。

    • geopoint フィールド（フィールド名、GeoJSON 形式の値、クリックした点の座標が含まれる）

selectionFilter 要素

ペイロードのselectionFilter要素には、有効な MQLフィルター ドキュメントが含まれている必要があります。このドキュメントは、クリックされたマークのカテゴリ チャンネルまたは連続チャート上のx値チャンネルに対応するフィルターを表します。 独自のselectionFilterを変更または実装できます。

フィルター オブジェクトは、単一のクリックされたアイテムを表します。

  • string または無制限の数値または日付。等価一致クエリ({field: value})または$eq 、 $ne 、 $in 、または$nin演算子を使用するクエリになります。

  • ビン化された数値または日付。 gt 、 $gte 、 $lt 、またはlte演算子を使用するクエリになります。 定期日付は無視されます。

例

{ field: 'value' }
{ field1: 'value1', field2: 'value2' }
{ field: { $in: [ 'a', 'b', 'c' ] } }
{ field: { $nin: [ 'x', 'y', 'z' ] } }
{ field: { $gt: 10 } }
{ field: { $gt: 13, $lte: 30 } }
{ field: { $gt: Date("2020-01-01"), $lt: Date("2020-03-31") } }

selectionFilterドキュメントには複数のキーと値のフィルターを含めることができます。 たとえば、複数系列チャートのマークをクリックすると、フィルタードキュメントにはカテゴリと系列のフィルターペアの両方が含まれます。 各フィルターは、そのラベルではなく、使用されているデータソース フィールドを参照する必要があります。

setHighlightメソッドを使用して、クリックしたイベントの強調表示を有効にできます。

例

const eventHandler = (payload) => {
  chart.setHighlight(payload.selectionFilter);
};
chart.render(container).then(() => {
  chart.addEventListener('click', eventHandler);
});

詳しくは、「チャート要素の強調表示 」を参照してください。

要素ロールのフィルターを持つイベント ハンドラーを含む埋め込みチャートでは、チャートには次の内容が表示されます。

  • このフィルタリングされたクリック イベントをトリガーする要素にカーソルを合わせた場合

  • このクリック イベントをtriggerしていない要素にカーソルを合わせた場合

イベント ハンドラーに要素ロールのフィルターが含まれていない場合、チャート要素にカーソルを合わせると、 が表示されます。

target 要素

ペイロードのtarget要素には、次のようなクリックされたターゲットに関する情報が含まれます。

  • マークのタイプ。たとえば、 rect 、 line 、 arc 、 symbol 、 group 、 areaなど

  • マークのロール（例mark 、 legend 、 axis-label 、 axis-title 、 tick-label 、 legend-entry 、 legend-title 、 frameなど

  • マークのコレクションの色

テーブルの場合、Charts 埋め込み JavaScript SDK クリック イベント ハンドラー ペイロードは次をキャプチャします。

  • マーク タイプ。 text

  • ロールをマークします。たとえば、 group-cell 、 value-cell 、 dynamic-value-cell 、 row-total-cell 、 column-total-cell 、 header-column-total-cell 、 grand-total-cellなど

地理空間チャートの場合、Charts 埋め込み JavaScript SDK クリック イベント ハンドラー ペイロードは次をキャプチャします。

  • マークのタイプ。たとえば、 polygon 、 map 、 symbolなど

  • マークのロール（ markやmapなど）

  • マークのコレクションの色

Charts 埋め込み JavaScript SDK クリック イベント ハンドラーは、列ヘッダー上のクリック イベントをキャプチャしません。

例

Charts 埋め込み JavaScript SDK には、アプリケーション内のクリック イベントの一般的な使用方法を示す例が含まれています。 最初の例は、基本的なクリック イベントとペイロード処理を示しています。 2 番目の例は、クリックされたチャート要素の対話型フィルタリングを示しています。

埋め込み SDK のインストールと独自のデータまたはサンプル データを使用してサンプル アプリを実行する方法の詳細については、「Atlas Charts のクリック イベントの 埋め込み例 」を参照してください。Github 。各サンプル アプリは、アプリに固有のチャート ID とベース URL で構成されています。 必ず正しいチャート ID とベース URL を使用して独自のアプリを構成してください。

クリック イベントの基本的な処理

サンプル アプリ では クリック イベントの基本的な処理では、Movie Genres チャートの要素をクリックすると、クリック イベント ハンドラーはクリックされた要素に基づいてデータを表示します。このアプリケーション例では、チャートには次が表示されます： （チャートにマーク ロールのフィルターが含まれていないため）。

チャート内の要素をクリックするたびに、クリック イベントリスナーはpayload を更新し、x 軸と y 軸のデータを反映します。Movie Genresチャートで特定のジャンルと 10 年間を表す要素をクリックすると、 Clicked ElementとFull Event Payloadにはその映画のジャンルと 10 年間についての詳細が表示されます。

  • クリックされた要素のデータを表すフィールド。

  • マーク タイプ、ロール、および埋め込み色。

イベント ペイロード全体を表示するには、 サンプル アプリ を参照してください。

クリック イベントのインタラクティブ フィルタリング

サンプル アプリ ではMovie Genres インタラクティブ フィルタリング用に、 チャートで要素をクリックすると、埋め込み SDK はクリックした要素に基づいてフィルターを生成し、そのフィルターを 2 番目のチャートに適用します。このサンプルアプリケーションでは、 チャートには次の内容が表示されます。

  • このインタラクティブ要素にカーソルを合わせると

  • このクリック イベントをtriggerしていない要素にカーソルを合わせた場合

クリック イベント リスナーは、 optionsパラメータを通じて指定されたマーク ロールのイベントのみをトリガーします。 ペイロードでは、映画ジャンルを表すy軸と 10 年を表す下限と上限の範囲に基づいてフィルターが定義されます。 Movie Genresチャートで特定のジャンルと 10 年間を表す要素をクリックするたびに、 Movie Detailsテーブルはクリックされた要素でフィルタリングされ、そのジャンルと 10 年間で利用可能な映画が表示されるように変わります。

サンプル イベント ハンドラーのコールバック関数全体を表示するには、 サンプル アプリ を参照してください。

戻る

埋め込み認証プロバイダの設定

次へ

チャート要素の強調表示