状态(State)
G2 中状态(State) 主要用来控制标记的状态样式。这些状态会被交互触发,属性是 @antv/g 支持的样式属性。
({type: 'interval',state: {/** fill 填充色;stroke 描边色;strokeWidth 描边宽度 */active: { fill: 'red', stroke: 'blue', strokeWidth: 2 },inactive: { fill: '#aaa' },},});
// API// 第一种方式chart.interval().state('active', { fill: 'red', stroke: 'blue', strokeWidth: 2 }).state('inactive', { fill: '#aaa' });// 第二种方式chart.interval().state({active: { fill: 'red', stroke: 'blue', strokeWidth: 2 },inactive: { fill: '#aaa' },});
内置状态
目前一共有 4 个内置状态:
- active - 高亮时候的样式
- inactive - 没有高亮时候的样式
- selected - 选择时候的样式
- unselected - 没有选择时候的样式
高亮状态
(() => {const chart = new G2.Chart();chart.interval().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',}).encode('x', 'letter').encode('y', 'frequency').axis('y', { labelFormatter: '.0%' }).state('active', { fill: 'red' }).state('inactive', { fill: '#aaa' }).interaction('elementHighlight'); // 设置高亮交互chart.render();return chart.getContainer();})();
选择状态
(() => {const chart = new G2.Chart();chart.interval().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',}).encode('x', 'letter').encode('y', 'frequency').axis('y', { labelFormatter: '.0%' }).state('selected', { fill: 'red', stroke: 'blue', strokeWidth: 2 }).state('unselected', { fill: '#aaa' }).interaction('elementSelect'); // 设置选择交互chart.render();return chart.getContainer();})();
状态优先级
g2 支持多个状态同时生效,当状态配置产生冲突时,会按照优先级选择生效的配置
考虑如下配置
(() => {const chart = new G2.Chart();const state = {selected: { fill: 'red' },active: { fill: 'green', stroke: 'black', lineWidth: 1 },};chart.interval().data({type: 'fetch',value:'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',}).encode('x', 'letter').encode('y', 'frequency').interaction('elementHighlight', { state }) // 设置高亮交互;.interaction('elementSelect', { state }); // 设置选择交互;chart.render();return chart.getContainer();})();
hover 时,active 状态生效,会有边框(stroke)和绿色背景色(fill)。
点击时,active 与 selected 状态同时生效,但两者都配置了 fill 产生冲突,此时 selected 状态的优先级更高,最终生效的是红色 red。
具体的状态优先级为
selected: 3unselected: 3active: 2inactive: 2default: 1
上一篇
zoomOut
下一篇
概览