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

elementSelectByX

Previous
elementSelectByColor
Next
fisheye

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...

概述

elementSelectByX 交互的对象是图表元素 element,当点击元素时,选中所有具有相同 x 通道值的元素。

  • 触发:点击元素。

  • 结束:再次点击选中的元素。

  • 影响状态:

选中的元素变为 selected 状态。

其他元素变为 unselected 状态。

交互内置状态:

({
// selected 状态下的元素为1px黑色边框
state: { selected: { lineWidth: '1', stroke: '#000' } },
});
example
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',
},
transform: [
{ type: 'sortX', by: 'y', reverse: true, slice: 6 },
{ type: 'dodgeX' },
],
xField: 'state',
yField: 'population',
colorField: 'age',
axis: { y: { labelFormatter: '~s' } },
state: { selected: { fill: 'red' }, unselected: { opacity: 0.5 } },
interaction: { elementSelectByX: true }
};
return <Column {...config} />;
};
createRoot(document.getElementById('container')).render(<Demo />);

使用方式

配置 elementSelectByX 交互有两种方式:

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

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

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

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

配置层级

交互可以配置在 Mark 层级:

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

配置项

元素选择交互配置有两处:

  1. 交互配置
  2. 元素选中的样式

交互配置

属性描述类型默认值
background是否高亮背景booleanfalse
region点击空白区域是否触发选择booleanfalse
single是否单选,设置为 true 时每次只能选中一个 x 值对应的元素组booleanfalse
multipleSelectHotkey多选热键的 code,按住热键后变为多选,设置此属性后single无效。不设置时默认为多选模式string | string[]-

元素选中样式

元素选中样式,效果见示例自定义选中

属性描述类型默认值必选
offset主方向上的便偏移量number0
radius元素圆角number | (datum, index, data) => number0
fill元素填充色string | (datum, index, data) => string-
fillOpacity元素填充透明度number | (datum, index, data) => number-
stroke元素的描边string | (datum, index, data) => string-
strokeOpacity元素描边透明度number | (datum, index, data) => number-
lineWidth元素描边的宽度number | (datum, index, data) => number-
lineDash元素描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。[number,number] | (datum, index, data) => [number , number]-
opacity元素的整体透明度number | (datum, index, data) => number-
shadowColor元素阴影颜色string | (datum, index, data) => string-
shadowBlur元素阴影的高斯模糊系数number | (datum, index, data) => number-
shadowOffsetX设置阴影距元素的水平距离number | (datum, index, data) => number-
shadowOffsetY设置阴影距元素的垂直距离number | (datum, index, data) => number-
cursor元素鼠标样式。同 css 的鼠标样式。string | (datum, index, data) => stringdefault
backgroundRadius背景圆角number | (datum, index, data) => number0
backgroundFill背景填充色string | (datum, index, data) => stringtransparent
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) => stringdefault

在 selected 元素中配置背景的时候,不是以对象的形式来配置,而是以 background前缀加属性的方式来配置。

({
state: {
selected: {
offset: 10,
radius: 50,
fill: '#1890FF',
fillOpacity: 0.9,
stroke: '#40A9FF',
strokeOpacity: 0.9,
lineWidth: 2,
lineDash: [4, 8],
opacity: 1,
shadowColor: '#1890FF',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
cursor: 'pointer',
backgroundRadius: 50,
backgroundFill: '#E6F7FF',
backgroundFillOpacity: 0.9,
backgroundStroke: '#91D5FF',
backgroundStrokeOpacity: 0.9,
backgroundLineWidth: 2,
backgroundLineDash: [4, 8],
backgroundOpacity: 1,
backgroundShadowColor: '#91D5FF',
backgroundShadowBlur: 10,
backgroundShadowOffsetX: 5,
backgroundShadowOffsetY: 5,
backgroundCursor: 'pointer',
},
},
});

事件

监听事件

支持以下的事件:

  • element:select - 元素选中时触发
  • element:unselect - 元素取消选中时触发
chart.on('element:select', (e) => {
console.log(e.data.data);
console.log(e.nativeEvent);
});
chart.on('element:unselect', (e) => {
console.log(e.nativeEvent);
});

触发交互

支持以下的事件:

  • element:select - 选中数据
  • element:unselect - 取消选中
chart.emit('element:select', {
data: { data: [{ population: 5038433 }, { population: 3983091 }] },
});
chart.emit('element:unselect', {});

示例

基础选择

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';
const Demo = () => {
const config ={
paddingLeft: 50,
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: 'sortX', by: 'y', reverse: true, slice: 6 },
{ type: 'dodgeX' },
],
axis: { y: { labelFormatter: '~s' } },
interaction: { elementSelectByX: 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 ={
paddingLeft: 50,
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: 'sortX', by: 'y', reverse: true, slice: 6 },
{ type: 'dodgeX' },
],
axis: { y: { labelFormatter: '~s' } },
state: {
selected: {
offset: 10,
radius: 50,
fill: (d) => (d.population > 1000000 ? '#F5222D' : '#1890FF'),
fillOpacity: 0.9,
stroke: (d) => (d.population > 1000000 ? '#FF4D4F' : '#40A9FF'),
strokeOpacity: 0.9,
lineWidth: 2,
lineDash: [4, 8],
opacity: 1,
shadowColor: (d) => (d.population > 1000000 ? '#F5222D' : '#1890FF'),
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
cursor: 'pointer',
backgroundRadius: 50,
backgroundFill: (d) => (d.population > 1000000 ? '#FFF1F0' : '#E6F7FF'),
backgroundFillOpacity: 0.9,
backgroundStroke: (d) => (d.population > 1000000 ? '#FFA39E' : '#91D5FF'),
backgroundStrokeOpacity: 0.9,
backgroundLineWidth: 2,
backgroundLineDash: [4, 8],
backgroundOpacity: 1,
backgroundShadowColor: (d) =>
d.population > 1000000 ? '#FFA39E' : '#91D5FF',
backgroundShadowBlur: 10,
backgroundShadowOffsetX: 5,
backgroundShadowOffsetY: 5,
backgroundCursor: 'pointer',
},
},
interaction: {
elementSelectByX: {
background: 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 ={
paddingLeft: 50,
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: 'sortX', by: 'y', reverse: true, slice: 6 },
{ type: 'dodgeX' },
],
axis: { y: { labelFormatter: '~s' } },
interaction: {
elementSelectByX: {
single: true, // 设置为单选模式
background: 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 ={
paddingLeft: 50,
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: 'sortX', by: 'y', reverse: true, slice: 6 },
{ type: 'dodgeX' },
],
axis: { y: { labelFormatter: '~s' } },
interaction: {
elementSelectByX: {
multipleSelectHotkey: 'ShiftLeft', // 按住左 Shift 键进入多选模式
background: true,
},
}
};
return <Column {...config} />;
};
createRoot(document.getElementById('container')).render(<Demo />);