legendHighlight
Previous
legendFilter
Next
poptip
Loading...
legendHighlight
交互的对象是图表组件 legend 。
框选范围的元素变为 active
状态。
框选范围以外的元素变为 inactive
状态。
交互内置状态:
({// 定义 inactive 状态下的元素透明度为0.5state: { inactive: { opacity: 0.5 } },});
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
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');});
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 />);