elementHighlightByColor

概述

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

触发：鼠标悬浮在元素上。
结束：鼠标移出元素。
影响状态：

悬浮的元素变为 active 状态。

其他元素变为 inactive 状态。

交互内置状态：

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

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      data: {
        type: 'fetch',
        value:
          'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
        format: 'csv',
      },
      xField: 'state',
      yField: 'population',
      colorField: '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 } }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

使用方式

配置 elementHighlightByColor 交互有两种方式：

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

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

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

({
  interaction: {
    elementHighlightByColor: {
      background: true,
    },
  },
});

配置层级

交互可以配置在 Mark 层级：

({
  interaction: { elementHighlightByColor: true },
});

配置项

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

交互配置
元素高亮的样式

交互配置

属性	描述	类型	默认值
background	是否高亮背景	`boolean`	false
region	鼠标移动到元素空白区域时是否触发高亮(效果见下图)	`boolean`	false
link	是否展示连接线	`boolean`	false

元素高亮样式配置

属性	描述	类型	默认值
offset	主方向上的便偏移量	number	`0`
background	是否高亮背景	backgroundStyle	详见backgroundstyle
link	是否展示连接线	linkStyle	详见linkStyle

backgroundStyle

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

属性	描述	类型	默认值
backgroundRadius	背景圆角	number \| (datum, index, data) => number	`0`
backgroundFill	背景填充色	string \| (datum, index, data) => string	`transparent`
backgroundFillOpacity	背景填充透明度	number \| (datum, index, data) => number	-
backgroundStroke	背景的描边	string \| (datum, index, data) => string	-
backgroundStrokeOpacity	背景描边透明度	number \| (datum, index, data) => number	-
backgroundLineWidth	背景描边的宽度	number \| (datum, index, data) => number	-
backgroundLineDash	背景描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。	[number,number] \| (datum, index, data) => [number , number]	-
backgroundOpacity	背景的整体透明度	number \| (datum, index, data) => number	-
backgroundShadowColor	背景阴影颜色	string \| (datum, index, data) => string	-
backgroundShadowBlur	背景阴影的高斯模糊系数	number \| (datum, index, data) => number	-
backgroundShadowOffsetX	设置阴影距背景的水平距离	number \| (datum, index, data) => number	-
backgroundShadowOffsetY	设置阴影距背景的垂直距离	number \| (datum, index, data) => number	-
backgroundCursor	背景鼠标样式。同 css 的鼠标样式。	string \| (datum, index, data) => string	`default`

({
  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

连接样式详见示例连接线

属性	描述	类型	默认值
linkRadius	连接线圆角	number \| (datum, index, data) => number	`0`
linkFill	连接线填充色	string \| (datum, index, data) => string	`transparent`
linkFillOpacity	连接线填充透明度	number \| (datum, index, data) => number	-
linkStroke	连接线的描边	string \| (datum, index, data) => string	-
linkStrokeOpacity	连接线描边透明度	number \| (datum, index, data) => number	-
linkLineWidth	连接线描边的宽度	number \| (datum, index, data) => number	-
linkLineDash	连接线描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。	[number,number] \| (datum, index, data) => [number , number]	-
linkOpacity	连接线的整体透明度	number \| (datum, index, data) => number	-
linkShadowColor	连接线阴影颜色	string \| (datum, index, data) => string	-
linkShadowBlur	连接线阴影的高斯模糊系数	number \| (datum, index, data) => number	-
linkShadowOffsetX	设置阴影距连接线的水平距离	number \| (datum, index, data) => number	-
linkShadowOffsetY	设置阴影距连接线的垂直距离	number \| (datum, index, data) => number	-
linkCursor	连接线鼠标样式。同 css 的鼠标样式。	string \| (datum, index, data) => string	`default`

({
  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 { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      data: {
        type: 'fetch',
        value:
          'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
        format: 'csv',
      },
      xField: 'state',
      yField: 'population',
      colorField: '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 }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

带连接线高亮

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      data: {
        type: 'fetch',
        value:
          'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
        format: 'csv',
      },
      xField: 'state',
      yField: 'population',
      colorField: '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 },
      }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

transpose

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      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,
      xField: 'state',
      yField: 'population',
      colorField: '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,
        },
      }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);