elementHighlightByColor
上一篇
elementHighlight
下一篇
elementHighlightByX
Loading...
elementHighlightByColor 交互的对象是图表元素 element，当鼠标悬浮在元素上时，高亮和鼠标悬浮的元素拥有相同 color 通道值的元素。
触发：鼠标悬浮在元素上。
结束：鼠标移出元素。
影响状态：
悬浮的元素变为 active 状态。
其他元素变为 inactive 状态。
交互内置状态：
({// active 状态下的元素为1px黑色边框state: { active: { lineWidth: '1', stroke: '#000' } },});
import { Chart } from '@antv/g2';const chart = new Chart({ container: 'container' });chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},encode: { x: 'state', y: 'population', color: '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 } },});chart.render();
配置 elementHighlightByColor 交互有两种方式：
第一种，传入 boolean 设置是否开启交互。
({type: 'interval',interaction: { elementHighlightByColor: true }, // 采用默认配置});
第二种，传入 配置项 对交互进行配置。
({type: 'line',interaction: {elementHighlightByColor: {background: true,},},});
交互可以配置在 Mark 层级：
({type: 'interval',interaction: { elementHighlightByColor: true },});
也可以配置在 View 层级，视图上声明的交互会传递给 children 声明的标记，如果该标记有声明对应的交互，就合并；否则不影响。
({type: 'view',interaction: { elementHighlightByColor: true },});
元素高亮交互配置有两处：
交互配置
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| background | 是否高亮背景 | boolean | false |
| region | 鼠标移动到元素空白区域时是否触发高亮(效果见下图) | boolean | false |
| link | 是否展示连接线 | boolean | false |
元素高亮样式配置
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| offset | 主方向上的便偏移量 | number | 0 |
| background | 是否高亮背景 | backgroundStyle | 详见backgroundstyle |
| link | 是否展示连接线 | linkStyle | 详见linkStyle |
元素高亮背景样式详见自定义高亮
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| 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',},},});
连接样式详见示例连接线
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| 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 { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},encode: { x: 'state', y: 'population', color: '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 },});chart.render();
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},encode: { x: 'state', y: 'population', color: '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 },},});chart.render();
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',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,encode: {x: 'state',y: 'population',color: '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,},},});chart.render();