alibaba / BizCharts

Powerful data visualization library based on G2 and React.
http://bizcharts.net/products/bizCharts
6.16k stars 671 forks source link

bizchart 如何实现g2chart.legend({ position: 'right', radio: {} }); #1522

Open tiehongji opened 2 years ago

tiehongji commented 2 years ago

BizCharts Version:^4.1.14 Platform:pc Mini Showcase(like screenshots): forck and create a demo: https://bizcharts.net/product/BizCharts4/demo/306 image

boydos commented 1 year ago

bizchart没有注册list-radio相关的交互,手动搞一下,关键代码如下: ` import ListFocus from '@antv/g2/lib/interaction/action/component/list-focus'; import ListRadio from '@antv/g2/lib/interaction/action/component/list-radio'; import { registerAction } from 'bizcharts'; registerAction('list-radio', ListRadio); registerAction('list-focus', ListFocus);

export default function xxxxx() { return (

// 核心是注册个交互 !context.isInShape('legend-item-radio'), action: ['list-unchecked:toggle', 'data-filter:filter', 'list-radio:show'], }, // 正反选数据: 只有当 radio === truthy 的时候才会有 legend-item-radio 这个元素 { trigger: 'legend-item-radio:mouseenter', action: ['list-radio:showTip'], }, { trigger: 'legend-item-radio:mouseleave', action: ['list-radio:hideTip'], }, { trigger: 'legend-item-radio:click', action: ['list-focus:toggle', 'data-filter:filter', 'list-radio:show'], }, ], }} /> ) } ` 参考文档: 1,https://github.com/antvis/G2/pull/3786/commits/0f85c42a6fb58e958985d45db3a09c0f0a306ae4# 2,https://github.com/alibaba/BizCharts/blob/master/src/components/Legend/actions.ts