logo

Ant Design Charts

  • Manual
  • Options
  • Examples
  • Productsantv logo arrow
  • 2.0.0
  • Component Overview
  • Common Configuration Statistical Charts
    • Chart composition
    • Component
      • 标题(Title)
      • Axis
      • Legend
      • Scrollbar
      • Slider
      • Tooltip
      • Label
    • Core
      • Color En
      • View
      • Data
        • overview
        • custom
        • ema
        • fetch
        • filter
        • fold
        • inline
        • join
        • kde
        • log
        • map
        • pick
        • rename
        • slice
        • sort
        • sortBy
      • Scale
        • overview
        • band
        • linear
        • log
        • ordinal
        • point
        • pow
        • quantile
        • quantize
        • sqrt
        • threshold
        • time
      • Transform
        • overview
        • bin
        • binX
        • diffY
        • dodgeX
        • flexX
        • group
        • groupColor
        • groupX
        • groupY
        • jitter
        • jitterX
        • jitterY
        • normalizeY
        • pack
        • sample
        • select
        • selectX
        • selectX
        • sortColor
        • sortX
        • sortY
        • stackEnter
        • stackY
        • symmetryY
      • Coordinate
        • overview
        • fisheye
        • parallel
        • polar
        • radial
        • theta
        • transpose
        • cartesian3D
      • 样式(Style)
      • Animate
        • overview
        • fadeIn
        • fadeOut
        • growInX
        • growInY
        • morphing
        • pathIn
        • scaleInX
        • scaleInY
        • scaleOutX
        • scaleOutY
        • waveIn
        • zoomIn
        • zoomOut
      • 状态(State)
      • Interaction
        • Overview
        • brushAxisHighlight
        • brushHighlight
        • brushXHighlight
        • brushYHighlight
        • brushFilter
        • brushXFilter
        • brushYFilter
        • chartIndex
        • elementHighlight
        • elementHighlightByColor
        • elementHighlightByX
        • elementSelect
        • elementSelectByColor
        • elementSelectByX
        • fisheye
        • legendFilter
        • legendHighlight
        • poptip
        • scrollbarFilter
        • sliderFilter
      • Composition
        • overview
        • facetCircle
        • facetRect
        • repeatMatrix
        • spaceFlex
        • spaceLayer
        • timingKeyframe
      • Theme
        • overview
        • Academy
        • classic
        • classicDark
      • event
    • Specal Plot
      • Area
      • Bar
      • CirclePacking
      • DualAxes
      • Gauge
      • Line
      • Rose
      • Sankey
      • Scatter
      • Sunburst
      • Treemap
      • Venn
      • WordCloud
      • Column
      • Pie
      • BidirectionalBar
      • Box
      • Bullet
      • Funnel
      • Heatmap
      • Histogram
      • Liquid
      • Radar
      • Stock
      • Tiny
      • Violin
      • Waterfall
      • RadialBar
  • Relation Graph Components
    • Overview
    • MindMap
    • Fishbone
    • IndentedTree
    • Dendrogram
    • OrganizationChart
    • FlowGraph
    • FlowDirectionGraph
    • NetworkGraph
    • FAQ

brushHighlight

Previous
brushAxisHighlight
Next
brushXHighlight

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

概述

brushHighlight 交互的对象是图表元素 element ,将框选的区域的图表元素高亮显示,支持对框选区域的拖动和 resize。

  • 触发:框选元素。

  • 结束:单击图表区域。

  • 影响状态:

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

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

交互内置状态:

({
// 定义 inactive 状态下的元素透明度为0.5,注意,所有元素初始状态为 inactive
state: { inactive: { opacity: 0.5 } },
});
example
{
"autoFit": true,
"state": {
"inactive": {
"stroke": "gray"
}
},
"interaction": {
"brushHighlight": true
}
}

使用方式

配置 brushHighlight 交互有两种方式

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

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

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

({
interaction: {
brushHighlight: {
series: true,
},
},
});

配置层级

交互可以配置在 Mark 层级:

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

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

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

配置项

属性描述类型默认值必选
reversebrush 是否反转booleanfalse
seriesbrush 作用的是否是系列元素,控制高亮选择元素的模式booleanfalse
facetbrush 是否跨分面,控制交互方式booleanfalse
selectedHandles可以 resize 的手柄方向string[]['handle-n','handle-e','handle-s','handle-w','handle-nw','handle-ne','handle-se','handle-sw']
brushRegion自定义框选区域,一般不用配置,Ant Design Charts 内部用来配置 brushXHighlight 和 brushYHighlight(x, y, x1, y1, extent) => any(x, y, x1, y1) => [x, y, x1, y1]
mask框选区域的蒙版样式mask详见 mask
maskHandle框选区域的手柄样式maskHandle详见 maskHandle

series

series 参数是一个控制刷选高亮模式的关键开关,它决定了如何对图形元素进行视觉反馈。当配置 series: false时,更适合散点图、柱状图等离散元素,此时直接修改元素状态(如果是折线图这种连续图形,会改变整条线的状态);当配置series: true时,折线图、面积图等连续图形会局部路径高亮,请根据需要开启或关闭。

  • series: false
(() => {
const chart = new G2.Chart();
const config = {
interaction: { brushHighlight: { series: false } },
data: [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
],
encode: { x: 'year', y: 'value' },
scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
state: { active: { stroke: 'red' } },
labels: [{ text: 'value', style: { dx: -10, dy: -12 } }],
};
chart.options(config);
chart.render();
return chart.getContainer();
})();
  • series: true
(() => {
const chart = new G2.Chart();
const config = {
interaction: { brushHighlight: { series: true } },
data: [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
],
encode: { x: 'year', y: 'value' },
scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
state: { active: { stroke: 'red' } },
labels: [{ text: 'value', style: { dx: -10, dy: -12 } }],
};
chart.options(config);
chart.render();
return chart.getContainer();
})();

mask

配置框选区域的蒙版的样式。

属性描述类型默认值必选
maskFill蒙版的填充色string#777
maskFillOpacity蒙版的填充透明度number0.3
maskStroke蒙版的描边string#fff
maskStrokeOpacity描边透明度number
maskLineWidth蒙版描边的宽度number
maskLineDash描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。[number,number]
maskOpacity蒙版的整体透明度number
maskShadowColor蒙版阴影颜色string
maskShadowBlur蒙版阴影的高斯模糊系数number
maskShadowOffsetX设置阴影距蒙版的水平距离number
maskShadowOffsetY设置阴影距蒙版的垂直距离number
maskCursor鼠标样式。同 css 的鼠标样式stringdefault

在配置框选区域的蒙版样式的时候,不是以对象的形式来配置,而是以 mask前缀加属性的方式来配置。

({
interaction: {
brushHighlight: {
maskFill: '#000',
maskFillOpacity: 0.2,
maskStroke: 'red',
maskStrokeOpacity: 0.9,
maskLineWidth: 2,
maskLineDash: [4, 8],
maskOpacity: 0.2,
maskShadowColor: '#d3d3d3',
maskShadowBlur: 10,
maskShadowOffsetX: 10,
maskShadowOffsetY: 10,
maskCursor: 'pointer',
},
},
});

maskHandle

八个方向的 handle 的名字分别如下(按照东南西北命名),按照 mask[handleName][styleAttribute] 格式设置对应的属性,也可以通过 maskHandleSize 设置宽度。

custom-style
属性描述类型默认值必选
mask[handleName]Render自定义蒙版手柄的渲染函数(g, options, document) => DisplayObject
mask[handleName]Size蒙版手柄的宽度string
mask[handleName]Fill蒙版手柄的填充色string
mask[handleName]FillOpacity蒙版手柄的填充透明度number
mask[handleName]Stroke蒙版手柄的描边string
mask[handleName]StrokeOpacity描边透明度number
mask[handleName]LineWidth蒙版手柄描边的宽度number
mask[handleName]LineDash描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。[number,number]
mask[handleName]Opacity蒙版手柄的整体透明度number
mask[handleName]ShadowColor蒙版手柄阴影颜色string
mask[handleName]ShadowBlur蒙版手柄阴影的高斯模糊系数number
mask[handleName]ShadowOffsetX设置阴影距蒙版手柄的水平距离number
mask[handleName]ShadowOffsetY设置阴影距蒙版手柄的垂直距离number
mask[handleName]Cursor鼠标样式。同 css 的鼠标样式stringdefault
{
"state": {
"inactive": {
"stroke": "gray",
"opacity": 0.5
}
},
"interaction": {
"brushHighlight": {
"maskHandleNFill": "blue",
"maskHandleEFill": "red",
"maskHandleSFill": "green",
"maskHandleWFill": "yellow",
"maskHandleNWFill": "black",
"maskHandleNEFill": "steelblue",
"maskHandleSEFill": "pink",
"maskHandleSWFill": "orange"
}
}
}

事件

监听事件

支持以下的事件:

  • brush:start - 开始创建 brush 的时候触发
  • brush:end - brush 更新大小和位置完成时候触发
  • brush:remove - brush 移除的时候触发
  • brush:highlight - brush 改变大小和位置时触发
chart.on('brush:highlight', (e) => {
console.log(e.data.selection);
console.log(e.nativeEvent);
});

触发交互

支持以下的事件:

  • brush:highlight - 高亮数据
  • brush:remove - 移除 brush
chart.emit('brush:remove');
chart.emit('brush:highlight', { data: { selection } });

示例

自定义 Handle

可以通过 mask[handleName]Render 指定 handle 的渲染函数,用于渲染自定义的 handle。其中该函数签名如下。

function render(
g, // 挂载容器
options, // 样式属性,通过 mask[handleName][styleAttribute] 设置
document // 画布 document,用于创建自图形
) {
// 需要返回创建的图形
}

下面是一个创建 path handle 的例子:

null;
custom-brush
null;

自定义交互状态

有些交互会改变元素状态,我们可以通过配置元素状态的表现来改变交互的效果。

{
"autoFit": true,
"interaction": {
"brushHighlight": {
"series": true
}
},
"scale": {
"x": {
"range": [
0,
1
]
},
"y": {
"domainMin": 0,
"nice": true
}
},
"children": [
{
"type": "line",
"labels": [
{
"text": "value",
"style": {
"dx": -10,
"dy": -12
}
}
],
"state": {
"active": {
"lineWidth": 4,
"lineDash": [
0,
0
]
},
"inactive": {
"lineDash": [
2,
4
]
}
}
},
{
"type": "point",
"style": {
"fill": "white"
},
"tooltip": false,
"state": {
"active": {
"fill": "yellow"
}
}
}
]
}