交互模式

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

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

交叉点

显示交叉点上的数据

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'point'
  7. }
  8. }
  9. })

nearest

获取最接近点的项目。最近的项目是根据与图表项目中心的距离(point, bar)确定的。如果2个以上的条目距离相同,则使用最小面积的条目。如果intersect为true,则仅当鼠标位置与图形中的项目相交时触发。这对于组合图非常有用,其中点隐藏在bars后面。

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'nearest'
  7. }
  8. }
  9. })

single (已废弃)

Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.

label (已废弃)

参考 'index'

索引

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

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'index'
  7. }
  8. }
  9. })

要在图表中使用索引模式(如水平条形图,沿着y方向搜索),可以使用v2.7.0中引入的axis设置。 通过将这个值设置为y方向上的'y'被使用。

  1. var chart = new Chart(ctx, {
  2. type: 'horizontalBar',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'index',
  7. axis: 'y'
  8. }
  9. }
  10. })

x轴 (已废弃)

类似设置intersect = false'index'模式

数据集

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

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'dataset'
  7. }
  8. }
  9. })

x

返回基于X坐标相交的所有项目。对于垂直游标实现将是有用的。仅适用于笛卡尔图表。

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'x'
  7. }
  8. }
  9. })

y

返回基于Y坐标相交的所有项目。这对于水平光标实现将是有用的。仅适用于笛卡尔图表。

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. tooltips: {
  6. mode: 'y'
  7. }
  8. }
  9. })