クリックイベントの処理

項目一覧

前提条件

クリックイベント構文
ペイロード
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 要素
data 要素
selectionFilter 要素
target 要素

`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 年間で利用可能な映画が表示されるように変わります。

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

戻る

認証プロバイダの設定

チャート要素の強調表示

注意

前提条件

クリック イベント構文

例

注意

ペイロード

例

event 要素

data 要素

selectionFilter 要素

例

例

target 要素

例

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

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