ChartJS 图表交互

事件

以下属性定义图表如何事件交互

名称	类别	默认值	描述
events	String[]	["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]	监听图表的悬停和工具提示
onHover	Function	null	当任何事件触发时调用。在图表的上下文中调用，并传递事件和一系列活动元素（bars，points等）。
onClick	Function	null	如果事件的类型为“mouseup”或“click”，则调用该函数。在图表的上下文中调用，并传递事件和一系列活动元素。

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

//ctx 是获取canvas dom元素
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      // 图表不会响应除click之外的事件
      events: ['click']
  }
});

交互模式

通过配置与图形悬停或工具提示的交互时，可以使用多种不同的模式。

这些模式将在下面详细说明，以及它们与交点设置的结合方式。

显示交叉点上的数据
```
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      tooltips: {
          mode: 'point'
      }
  }
})
```
nearest

获取最接近点的项目。最近的项目是根据与图表项目中心的距离（point, bar）确定的。如果2个以上的条目距离相同，则使用最小面积的条目。如果 intersect 为true，则仅当鼠标位置与图形中的项目相交时触发。这对于组合图非常有用，其中点隐藏在 bars 后面。
```
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      tooltips: {
          mode: 'nearest'
      }
  }
})
```
索引(index)

查找相同索引项。如果 intersect 为 true，则第一个相交项用于确定数据中的索引。如果 intersect 为 false，则使用最近的项来确定索引。
```
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      tooltips: {
          mode: 'index'
      }
  }
})
```
要在图表中使用索引模式（如水平条形图，沿着y方向搜索），可以使用 v2.7.0 中引入的 axis 设置。通过将这个值设置为y方向上的'y'被使用。
```
var chart = new Chart(ctx, {
  type: 'horizontalBar',
  data: data,
  options: {
      tooltips: {
          mode: 'index',
          axis: 'y'
      }
  }
})
```
尝试一下
查找相同索引项。如果 intersect 为true，则第一个相交项用于确定数据中的索引。如果 intersect 为false，则使用最近的项来确定索引。
```
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      tooltips: {
          mode: 'dataset'
      }
  }
})
```
返回基于 X 坐标相交的所有项目。对于垂直游标实现将是有用的。仅适用于笛卡尔图表。
```
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      tooltips: {
          mode: 'x'
      }
  }
})
```
返回基于 Y 坐标相交的所有项目。这对于水平光标实现将是有用的。仅适用于笛卡尔图表。
```
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
      tooltips: {
          mode: 'y'
      }
  }
})
```

ChartJS 图表交互

事件

交互模式

nearest

索引(index)