# 交互

命名空间: options.interaction，全局交互配置位于 Chart.defaults.interaction。要配置哪些事件触发图表交互，请参见事件。

名称	类型	默认值	描述
`mode`	`string`	`'nearest'`	设置哪些元素出现在交互中。有关详细信息，请参见交互模式。
`intersect`	`boolean`	`true`	如果为 true，则交互模式仅在鼠标位置与图表上的项目相交时才适用。
`axis`	`string`	`'x'`	可以设置为 `'x'`、`'y'`、`'xy'` 或 `'r'` 来定义在计算距离时使用的方向。对于 `'index'` 模式默认为 `'x'`，对于 `dataset` 和 `'nearest'` 模式默认为 `'xy'`。
`includeInvisible`	`boolean`	`false`	如果为 true，则在评估交互时，图表区域之外的不可见点也将被包含在内。

默认情况下，这些选项适用于悬停和提示交互。相同的选项可以在 options.hover 命名空间中设置，在这种情况下，它们只会影响悬停交互。类似地，可以在 options.plugins.tooltip 命名空间中设置这些选项，以独立配置提示交互。

# 事件

以下属性定义了图表如何与事件交互。命名空间：options

名称	类型	默认值	描述
`events`	`string[]`	`['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']`	`events` 选项定义了图表应该监听的浏览器事件。这些事件中的每一个都会触发悬停，并传递给插件。更多...
`onHover`	`function`	`null`	当任何事件在图表区域上触发时调用。传递事件、活动元素数组（条形图、点等）和图表。
`onClick`	`function`	`null`	如果事件类型为 `'mouseup'`、`'click'` 或 '`'contextmenu'` 在图表区域上触发，则调用该事件。传递事件、活动元素数组和图表。

# 事件选项

例如，要使图表只响应点击事件，可以这样做

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // This chart will not respond to mousemove, etc
    events: ['click']
  }
});

每个插件的事件可以通过在插件选项中定义（允许的）事件数组来进一步限制

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // All of these (default) events trigger a hover and are passed to all plugins,
    // unless limited at plugin options
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    plugins: {
      tooltip: {
        // Tooltip will only receive click events
        events: ['click']
      }
    }
  }
});

不会在图表区域上触发的事件，如 mouseout，可以使用一个简单的插件来捕获

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // these are the default events:
    // events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
  },
  plugins: [{
    id: 'myEventCatcher',
    beforeEvent(chart, args, pluginOptions) {
      const event = args.event;
      if (event.type === 'mouseout') {
        // process the event
      }
    }
  }]
});

有关插件的更多信息，请参见插件

# 将事件转换为数据值

一个常见的事件是获取一个事件（例如点击事件），并找到事件发生在图表上的数据坐标。Chart.js 提供了使此过程变得简单的助手。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        onClick: (e) => {
            const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
            // Substitute the appropriate scale IDs
            const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
            const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
        }
    }
});

当使用捆绑器时，辅助函数必须单独导入，有关此的完整说明，请转到集成页面

# 模式

通过 interaction、hover 或 tooltips 配置与图形的交互时，可以使用多种不同的模式。

options.hover 和 options.plugins.tooltip 扩展自 options.interaction。因此，如果 mode、intersect 或任何其他通用设置仅在 options.interaction 中配置，则悬停和提示都会遵守该设置。

这些模式将在下面详细说明，以及它们与 intersect 设置如何协同工作。

查看不同的模式如何在提示中工作提示交互示例

# point

找到所有与点相交的项目。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'point'
        }
    }
});

# nearest

获取距离点最近的项目。最近的项目是根据到图表项目中心（点、条形）的距离确定的。可以使用 axis 设置来定义距离计算中考虑的坐标。如果 intersect 为 true，则仅在鼠标位置与图形中的项目相交时才会触发此事件。这对于组合图表（点隐藏在条形后面）非常有用。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'nearest'
        }
    }
});

# index

查找具有相同索引的项目。如果 intersect 设置为 true，则第一个相交项目用于确定数据中的索引。如果 intersect 为 false，则使用最近的项目（在 x 方向上）来确定索引。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'index'
        }
    }
});

要在水平条形图等图表中使用索引模式，在这些图表中我们沿着 y 方向搜索，可以使用 v2.7.0 中引入的 axis 设置。通过将此值设置为 'y'，y 方向将被使用。

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        interaction: {
            mode: 'index',
            axis: 'y'
        }
    }
});

# dataset

查找同一个数据集中的项目。如果 intersect 设置为 true，则第一个相交项目用于确定数据中的索引。如果 intersect 为 false，则使用最近的项目来确定索引。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'dataset'
        }
    }
});

# x

返回所有基于位置的 X 坐标相交的项目。这将对垂直光标实现很有用。请注意，这仅适用于笛卡尔图表。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'x'
        }
    }
});

# y

返回所有基于位置的 Y 坐标相交的项目。这将对水平光标实现很有用。请注意，这仅适用于笛卡尔图表。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'y'
        }
    }
});

# 自定义交互模式

可以通过向 Chart.Interaction.modes 地图添加函数来定义新的模式。可以使用 Chart.Interaction.evaluateInteractionItems 函数来帮助实现这些模式。

示例

import { Interaction } from 'chart.js';
import { getRelativePosition } from 'chart.js/helpers';
/**
 * Custom interaction mode
 * @function Interaction.modes.myCustomMode
 * @param {Chart} chart - the chart we are returning items from
 * @param {Event} e - the event we are find things at
 * @param {InteractionOptions} options - options to use
 * @param {boolean} [useFinalPosition] - use final element position (animation target)
 * @return {InteractionItem[]} - items that are found
 */
Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
  const position = getRelativePosition(e, chart);
  const items = [];
  Interaction.evaluateInteractionItems(chart, 'x', position, (element, datasetIndex, index) => {
    if (element.inXRange(position.x, useFinalPosition) && myCustomLogic(element)) {
      items.push({element, datasetIndex, index});
    }
  });
  return items;
};
// Then, to use it...
new Chart.js(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'myCustomMode'
        }
    }
})

如果你使用的是 TypeScript，你还需要注册新的模式

declare module 'chart.js' {
  interface InteractionModeMap {
    myCustomMode: InteractionModeFunction;
  }
}

← 元素布局 →