logo

Ant Design Charts

  • Manual
  • Components
  • Examples
  • Options
  • Productsantv logo arrow
  • 2.0.0
  • Common Configuration Statistical Charts
    • 标题(Title)
    • Axis
    • Legend
    • Scrollbar
    • Slider
    • Tooltip
    • Label
    • Color
    • event
    • Interaction
      • Overview
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • State
    • Style
    • Scale
      • overview
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • Animate
      • overview
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • Theme
      • overview
      • Academy
      • classic
      • classicDark
    • Data
      • overview
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy

legendHighlight

Previous
legendFilter
Next
poptip

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

开始使用

legendHighlight 交互的对象是图表组件 legend 。

  • 触发:鼠标悬停在图例项。
  • 结束:鼠标离开图例项。
  • 影响状态:

框选范围的元素变为 active 状态。

框选范围以外的元素变为 inactive 状态。

交互内置状态:

({
// 定义 inactive 状态下的元素透明度为0.5
state: { inactive: { opacity: 0.5 } },
});
example
import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';
const Demo = () => {
const config ={
"legend": {
"color": {
"state": {
"inactive": {
"labelOpacity": 0.5,
"markerOpacity": 0.5
}
}
}
},
"yField": ['end', 'start'],
"xField": "month",
"axis": {
"y": {
"labelFormatter": "~s"
}
},
"data": profit,
"interaction": {
"legendHighlight": true
}
};
return <Column {...config} />;
};
createRoot(document.getElementById('container')).render(<Demo />);

使用方式

传入 boolean 设置是否开启交互。

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

配置层级

图例高亮交互可以配置在 View 层级:

{
"interaction": {
"legendHighlight": true
}
}

配置项

当前版本的 LegendHighlgiht 交互无可配置参数。

需要设置 state 的 inactive 状态,可以参照元素状态 state

legend 组件配置

具体文档看图例 legend

事件

获得数据

  • legend:highlight - 当鼠标悬停在图例项上触发
  • legend:unhighlight - 当鼠标离开图例时触发
chart.on('legend:highlight', (e) => {
const { nativeEvent, data } = e;
if (!nativeEvent) return;
console.log(data);
});
chart.on('legend:highlight', (e) => {
const { nativeEvent, data } = e;
if (!nativeEvent) return;
console.log(data);
});
chart.on('legend:unhighlight', (e) => {
const { nativeEvent } = e;
if (!nativeEvent) return;
console.log('unhighlight');
});
chart.on('legend:unhighlight', (e) => {
const { nativeEvent } = e;
if (!nativeEvent) return;
console.log('unhighlight');
});
chart.on('legend:highlight', (e) => {
const { nativeEvent, data } = e;
if (!nativeEvent) return;
console.log(data);
});
chart.on('legend:unhighlight', (e) => {
const { nativeEvent } = e;
if (!nativeEvent) return;
console.log('unhighlight');
});

触发交互

  • legend:highlight - 高亮对应于图例值的数据
  • legend:unhighlight - 取消高亮状态
chart.emit('legend:highlight', {
data: { channel: 'color', value: 'Increase' },
});
chart.emit('legend:unhighlight', {});

示例

下面的示例展示了一个legendHighlight的基本交互功能。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';
const Demo = () => {
const config ={
autoFit: true,
height: 300,
data: [
{ name: 'London', month: 'Jan.', value: 18.9 },
{ name: 'London', month: 'Feb.', value: 28.8 },
{ name: 'London', month: 'Mar.', value: 39.3 },
{ name: 'London', month: 'Apr.', value: 81.4 },
{ name: 'London', month: 'May', value: 47 },
{ name: 'London', month: 'Jun.', value: 20.3 },
{ name: 'London', month: 'Jul.', value: 24 },
{ name: 'London', month: 'Aug.', value: 35.6 },
{ name: 'Berlin', month: 'Jan.', value: 12.4 },
{ name: 'Berlin', month: 'Feb.', value: 23.2 },
{ name: 'Berlin', month: 'Mar.', value: 34.5 },
{ name: 'Berlin', month: 'Apr.', value: 99.7 },
{ name: 'Berlin', month: 'May', value: 52.6 },
{ name: 'Berlin', month: 'Jun.', value: 35.5 },
{ name: 'Berlin', month: 'Jul.', value: 37.4 },
{ name: 'Berlin', month: 'Aug.', value: 42.4 },
],
xField: 'month',
yField: 'value',
colorField: 'name',
transform: [
{
type: 'dodgeX',
groupBy: 'x',
orderBy: 'value',
padding: 0.1,
},
],
interaction: {
legendHighlight: {
series: true,
},
},
state: { inactive: { opacity: 0.5 } }
};
return <Column {...config} />;
};
createRoot(document.getElementById('container')).render(<Demo />);