elementHighlightByColor

概述

elementHighlightByColor 交互的对象是图表元素 element，当鼠标悬浮在元素上时，高亮和鼠标悬浮的元素拥有相同 color 通道值的元素。

• 触发：鼠标悬浮在元素上。

• 结束：鼠标移出元素。

• 影响状态：

悬浮的元素变为 active 状态。

其他元素变为 inactive 状态。

交互内置状态：

({
  // active 状态下的元素为1px黑色边框
  state: { active: { lineWidth: '1', stroke: '#000' } },
});

import { Chart } from '@antv/g2';

const chart = new Chart({ container: 'container' });

chart.options({
  type: 'interval',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  },
  encode: { x: 'state', y: 'population', color: 'age' },
  transform: [
    { type: 'stackY' },
    { type: 'sortX', by: 'y', reverse: true, slice: 5 },
  ],
  state: {
    active: { fill: 'red', linkFillOpacity: 0.5 },
    inactive: { opacity: 0.5 },
  },
  axis: { y: { labelFormatter: '~s' } },
  interaction: { elementHighlightByColor: { link: true } },
});

chart.render();

使用方式

配置 elementHighlightByColor 交互有两种方式：

第一种，传入 boolean 设置是否开启交互。

({
  type: 'interval',
  interaction: { elementHighlightByColor: true }, // 采用默认配置
});

第二种，传入 配置项 对交互进行配置。

({
  type: 'line',
  interaction: {
    elementHighlightByColor: {
      background: true,
    },
  },
});

配置层级

交互可以配置在 Mark 层级：

({
  type: 'interval',
  interaction: { elementHighlightByColor: true },
});

也可以配置在 View 层级，视图上声明的交互会传递给 children 声明的标记，如果该标记有声明对应的交互，就合并；否则不影响。

({
  type: 'view',
  interaction: { elementHighlightByColor: true },
});

配置项

元素高亮交互配置有两处：

1. 交互配置
2. 元素高亮的样式

交互配置

元素高亮样式配置

backgroundStyle

元素高亮背景样式详见自定义高亮

({
  state: {
    active: {
      backgroundRadius: 50,
      backgroundFill: '#000',
      backgroundFillOpacity: 0.9,
      backgroundStroke: '#DAF5EC',
      backgroundStrokeOpacity: 0.9,
      backgroundLineWidth: 2,
      backgroundLineDash: [4, 8],
      backgroundOpacity: 1,
      backgroundShadowColor: '#d3d3d3',
      backgroundShadowBlur: 10,
      backgroundShadowOffsetX: 10,
      backgroundShadowOffsetY: 10,
      backgroundCursor: 'pointer',
    },
  },
});

linkStyle

连接样式详见示例连接线

({
  state: {
    active: {
      linkRadius: 50,
      linkFill: '#000',
      linkFillOpacity: 0.9,
      linkStroke: '#DAF5EC',
      linkStrokeOpacity: 0.9,
      linkLineWidth: 2,
      linkLineDash: [4, 8],
      linkOpacity: 1,
      linkShadowColor: '#d3d3d3',
      linkShadowBlur: 10,
      linkShadowOffsetX: 10,
      linkShadowOffsetY: 10,
      linkCursor: 'pointer',
    },
  },
});

事件

监听事件

支持以下的事件：

• element:highlight - 元素高亮时触发
• element:unhighlight - 元素取消高亮时触发

chart.on('element:highlight', (e) => {
  console.log(e.data.data);
  console.log(e.data.group);
  console.log(e.nativeEvent);
});

chart.on('element:unhighlight', (e) => {
  console.log(e.nativeEvent);
});

触发交互

支持以下的事件：

• element:highlight - 高亮数据
• element:unhighlight - 取消高亮

chart.emit('element:highlight', {
  data: { data: { population: 5038433 } },
});

chart.emit('element:unhighlight', {});

示例

基础高亮

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  },
  encode: { x: 'state', y: 'population', color: 'age' },
  transform: [
    { type: 'stackY' },
    { type: 'sortX', by: 'y', reverse: true, slice: 5 },
  ],
  state: {
    active: { fill: 'red', linkFillOpacity: 0.5 },
    inactive: { opacity: 0.5 },
  },
  axis: { y: { labelFormatter: '~s' } },
  interaction: { elementHighlightByColor: true },
});

chart.render();

带连接线高亮

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  },
  encode: { x: 'state', y: 'population', color: 'age' },
  transform: [
    { type: 'stackY' },
    { type: 'sortX', by: 'y', reverse: true, slice: 5 },
  ],
  state: {
    active: {
      fill: 'red',
      linkRadius: 50,
      linkFill: 'green',
      linkFillOpacity: 0.9,
      linkStroke: '#DAF5EC',
      linkStrokeOpacity: 0.9,
      linkLineWidth: 2,
      linkOpacity: 1,
      linkCursor: 'pointer',
    },
    inactive: { opacity: 0.5 },
  },
  axis: { y: { labelFormatter: '~s' } },
  interaction: {
    elementHighlightByColor: { link: true, background: true },
  },
});

chart.render();

transpose

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});
chart.options({
  type: 'interval',
  height: 600,
  transform: [
    { type: 'stackY' },
    { type: 'sortX', by: 'y', reverse: true, slice: 5 },
  ],
  coordinate: { transform: [{ type: 'transpose' }] },
  data: {
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  },
  legend: false,
  encode: {
    x: 'state',
    y: 'population',
    color: 'age',
  },
  axis: {
    y: { labelFormatter: '~s' },
  },
  scale: {
    x: { paddingInner: 0.2 },
  },
  state: {
    active: {
      linkFill: (d) => (d.state === 'CA' ? 'red' : undefined),
      stroke: '#000',
      lineWidth: 1,
      linkFillOpacity: 0.5,
    },
    inactive: {
      opacity: 0.6,
    },
  },
  interaction: {
    elementHighlightByColor: {
      link: true,
    },
  },
});

chart.render();