elementSelectByColor
上一篇
elementSelect
下一篇
elementSelectByX
Loading...
elementSelectByColor 交互的对象是图表元素 element，当点击元素时，选中所有具有相同 color 通道值的元素。
触发：点击元素。
结束：再次点击选中的元素。
影响状态：
选中的元素变为 selected 状态。
其他元素变为 unselected 状态。
交互内置状态：
({// selected 状态下的元素为1px黑色边框state: { selected: { 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',},transform: [{ type: 'stackY' },{ type: 'sortX', by: 'y', reverse: true, slice: 5 },],encode: {x: 'state',y: 'population',color: 'age',},axis: { y: { labelFormatter: '~s' } },state: {selected: { fill: 'red', linkFillOpacity: 0.5 },unselected: { opacity: 0.5 },},interaction: {elementSelectByColor: {link: true,},},});chart.render();
配置 elementSelectByColor 交互有两种方式：
第一种，传入 boolean 设置是否开启交互。
({type: 'interval',interaction: { elementSelectByColor: true }, // 采用默认配置});
第二种，传入 配置项 对交互进行配置。
({type: 'interval',interaction: {elementSelectByColor: {link: true,background: true,},},});
交互可以配置在 Mark 层级：
({type: 'interval',interaction: { elementSelectByColor: true },});
也可以配置在 View 层级，视图上声明的交互会传递给 children 声明的标记，如果该标记有声明对应的交互，就合并；否则不影响。
({type: 'view',interaction: { elementSelectByColor: true },});
元素选择交互配置有两处：
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| background | 是否高亮背景 | boolean | false |
| region | 点击空白区域是否触发选择 | boolean | false |
| single | 是否单选，设置为 true 时每次只能选中一个颜色组 | boolean | false |
| multipleSelectHotkey | 多选热键的 code，按住热键后变为多选，设置此属性后single无效。不设置时默认为多选模式 | string | string[] | - |
| link | 是否展示连接线 | boolean | false |
元素选中样式，效果见示例自定义选中
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| offset | 主方向上的便偏移量 | number | 0 | |
| radius | 元素圆角 | number | (datum, index, data) => number | 0 | |
| 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) => string | default | |
| 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 |
连接样式详见示例带连接线选择
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| 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: {selected: {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: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 { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',autoFit: true,data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},transform: [{ type: 'stackY' },{ type: 'sortX', by: 'y', reverse: true, slice: 5 },],encode: {x: 'state',y: 'population',color: 'age',},axis: { y: { labelFormatter: '~s' } },interaction: { elementSelectByColor: true },});chart.render();
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',autoFit: true,data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},transform: [{ type: 'stackY' },{ type: 'sortX', by: 'y', reverse: true, slice: 5 },],encode: {x: 'state',y: 'population',color: 'age',},axis: { y: { labelFormatter: '~s' } },state: {selected: {offset: 10,radius: 50,fill: (d) => (d.population > 1000000 ? 'red' : '#000'),fillOpacity: 0.9,stroke: '#DAF5EC',strokeOpacity: 0.9,lineWidth: 2,lineDash: [4, 8],opacity: 1,shadowColor: '#d3d3d3',shadowBlur: 10,shadowOffsetX: 10,shadowOffsetY: 10,cursor: 'pointer',backgroundRadius: 50,backgroundFill: (d) => (d.population > 1000000 ? 'red' : '#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',linkFillOpacity: 0.5,},},interaction: {elementSelectByColor: {background: true,link: true,},},});chart.render();
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',autoFit: true,data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},transform: [{ type: 'stackY' },{ type: 'sortX', by: 'y', reverse: true, slice: 5 },],encode: {x: 'state',y: 'population',color: 'age',},axis: { y: { labelFormatter: '~s' } },interaction: {elementSelectByColor: {single: true, // 设置为单选模式background: true,link: true,},},});chart.render();
import { Chart } from '@antv/g2';const chart = new Chart({container: 'container',});chart.options({type: 'interval',autoFit: true,data: {type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',format: 'csv',},transform: [{ type: 'stackY' },{ type: 'sortX', by: 'y', reverse: true, slice: 5 },],encode: {x: 'state',y: 'population',color: 'age',},axis: { y: { labelFormatter: '~s' } },state: {selected: { fill: 'red', linkFillOpacity: 0.5 },unselected: { opacity: 0.5 },},interaction: {elementSelectByColor: {multipleSelectHotkey: 'ShiftLeft', // 按住左 Shift 键进入多选模式link: true,},},});chart.render();