/ /

/ /

处理单击事件

注意

Charts Embedding SDK 中的点击事件在 2 版本中可用。1。0和更高版本。

Charts Embedding JavaScript SDK 包含一个单击事件处理程序，允许您订阅单击事件。当您单击图表上的特定元素时，单击事件处理程序会捕获您单击的元素的详细信息。使用此功能可在应用程序中构建类似以下的交互式体验：

单击图表上的元素，然后打开一个窗格，其中包含有关所单击元素的更多详细信息。
为另一个图表创建筛选器。

先决条件

开始之前，请安装Charts Embedding 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参数，则仅当单击标记的角色与参数中指定的值之一匹配时，单击事件处理程序才会捕获事件。如果省略此参数，单击事件处理程序将捕获图表上的所有单击事件。

有效负载

您可以使用单击事件有效负载构建自定义筛选器，并将其应用于应用程序中的其他Atlas Charts。回调函数的有效负载对象的语法如下所示：

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点击event的修饰键，例如altKey 、 ctrlKey 、 shiftKey 、 metaKey
X和Y坐标：
- 相对于图表的 canvas 元素
- 从应用程序的角度
- 相对于页面
- 相对于屏幕

`data` 元素

有效负载的data元素包含有关单击的图表元素的信息。对于每个编码数据字段（ x 、 y 、 series 、 intensity 、 color 、 shape 、 size 、 label 、 arc 、 value 、 target 、 number 、 display 、 text 、 location ）， data元素包含：

渠道 label
被单击元素的value
仅适用于数字或日期分箱的下限

对于表，Charts Embedding JavaScript SDK 点击事件处理程序会捕获表示被点击元素的渠道数据的字段的点击事件：

groups 字段，其中包含所有群组渠道，包括标签和值
cell 字段，其中包含列标题标签和单击单元格的值

对于Atlas Charts，嵌入 JavaScript SDK 的 Charts 单击事件处理程序会捕获以下元素的事件：

对于Atlas Charts ，单击事件处理程序会捕获表示被单击元素的渠道数据的字段：
- lat 字段，其中包含纬度
- lng 字段，其中包含经度
- location 字段，其中包含单击的地理空间区域的字段标签和值
对于地理空间Atlas Charts，单击事件处理程序会捕获表示被单击元素的渠道数据的字段：
- geopoint 字段，包含字段名称、GeoJSON 格式的值和点击点的坐标

`selectionFilter` 元素

有效负载的selectionFilter元素必须包含有效的 MQL过滤文档，该文档表示与连续图表上单击的标记的类别通道或x值渠道相对应的过滤。您可以修改或实现自己的selectionFilter 。

筛选器对象表示单击的单个项目：

字符串或未分箱的数字或日期，它成为等值匹配查询({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);
});

要了解更多信息，请参阅突出显示图表元素。

在包含带有元素角色筛选器的事件处理程序的嵌入式图表上，图表显示：

的当您将鼠标悬停在Atlas Triggers筛选后的单击事件的元素上时
的当您将鼠标悬停在不trigger点击事件的元素上时

如果事件处理程序不包含元素角色的筛选器，则将鼠标悬停在任何图表元素上时出现。

`target` 元素

有效负载的target元素包含有关单击的目标的信息，包括：

标记的类型，例如rect 、 line 、 arc 、 symbol 、 group或area
标记的角色，例如mark 、 legend 、 axis-label 、 axis-title 、 tick-label 、 legend-entry 、 legend-title或frame
标记的填充颜色

对于表格，Charts Embedding JavaScript SDK 点击事件处理程序有效负载捕获以下内容：

标记类型，即 text
标记角色，例如group-cell 、 value-cell 、 dynamic-value-cell 、 row-total-cell 、 column-total-cell 、 header-column-total-cell和grand-total-cell

对于地理空间图表，嵌入 JavaScript SDK 的 Charts 点击事件处理程序有效负载捕获以下内容：

标记的类型，例如polygon 、 map或symbol
标记的角色，例如mark或map
标记的填充颜色

Charts Embedding JavaScript SDK 点击事件处理程序不捕获列标题上的点击事件。

示例

Charts Embedding JavaScript SDK 包含演示应用程序中单击事件常见用法的示例。第一个示例显示了基本的点击事件和有效负载处理。第二个示例显示了对单击的图表元素进行交互式筛选。

要学习；了解有关安装嵌入 SDK 以及使用您自己的数据或示例数据运行示例应用的更多信息，请参阅Github上的“Atlas Charts点击事件嵌入示例”。每个示例应用都配置有特定于该应用的图表ID和基本URL 。请务必使用正确的图表ID和基本URL配置您自己的应用程序。

点击事件的基本处理

在用于基本处理点击事件的示例应用中，当您点击 Movie Genres图表上的某个元素时，点击事件处理程序会根据被点击的元素显示数据。在此示例应用程序中，图表在所有图表元素上显示，因为图表不包含标记角色的过滤。

每次单击图表中的元素时，单击事件侦听器都会刷新payload以反映来自x和y轴的数据。当您单击Movie Genres图表中代表特定类型和年代的元素时， Clicked Element和Full Event Payload会显示有关该电影类型和年代的详细信息，包括：

表示被单击元素的数据的字段。
标记类型、角色和填充颜色。

请参阅示例应用，查看完整的事件负载。

点击事件的交互式筛选

在交互式筛选的示例应用中，当您单击Movie Genres 图表上的某个元素时，嵌入式 SDK 会根据您单击的元素生成过滤，然后将该过滤应用于第二个图表。在此示例应用程序中，图表显示：

的当您将鼠标悬停在交互式元素上时
的当您将鼠标悬停在不trigger点击事件的元素上时

单击事件侦听器仅Atlas Triggers通过options参数指定的标记角色的事件。有效负载定义一个基于y轴（代表电影类型）以及代表十年的上下限范围的筛选器。每次您在Movie Genres图表中单击代表特定类型和年代的元素时， Movie Details表都会按单击的元素进行筛选，并更改为显示该类型和年代的可用电影。

请参阅示例应用，查看完整的示例事件处理程序回调函数。

后退

配置身份验证提供者

来年

突出显示图表元素

注意

先决条件

单击事件语法

例子

注意

有效负载

例子

event 元素

data 元素

selectionFilter 元素

例子

例子

target 元素

示例

点击事件的基本处理

点击事件的交互式筛选

`event` 元素

`data` 元素

`selectionFilter` 元素

`target` 元素