ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] 拖动scrollbar, 之前的选中状态会被自动清除
🐛 bug 描述 [详细地描述 bug,让大家都能理解]
条形图/柱状图表配置了scrollbar之后,当在当前区域有点击选中状态的柱子,滚动scrollbar ,该柱子选中状态会被自动清除
📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]
1 条形图/柱状图表配置了scrollbar,和 elementSelect 2 在当前可视区域,点击图表中的某个柱子,被点击的柱子显示选中状态 3 左右滚动滑动条 4 被点击的柱子选中状态 自动被清除
🏞 期望结果 [描述你原本期望看到的结果]
滑动条的滚动,不影响之前被点击的柱子显示选中状态
💻 复现代码 [提供可复现的代码,仓库,或线上示例]
import { Bar } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';
const DemoBar = () => {
const config = {
data: {
type: 'fetch',
value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/bar-bar.json',
},
xField: 'letter',
yField: 'frequency',
sort: {
reverse: true,
},
state: {
unselected: { opacity: 0.5 },
selected: { fill: '#0098FF' },
active: { fill: '#52C5FF' },
},
scrollbar:{
x: {
ratio: 8 / 24, // 仅展示8条数据,其余通过滑动条
scrollable: true,
slidable: true,
},
},
interaction: {
elementSelect: true,
elementHighlight: false,
elementHighlightByColor: false,
},
onReady: ({ chart }) => {
chart.on('plot:click', (ev) => {
// 一直都是空的
console.log('plot', ev)
})
// 图表点击事件响应
chart.on(`interval:click`, (ev) => {
console.log('element', ev)
})
},
label: {
text: 'frequency',
formatter: '.1%',
style: {
textAnchor: (d) => (+d.frequency > 0.008 ? 'right' : 'start'),
fill: (d) => (+d.frequency > 0.008 ? '#fff' : '#000'),
dx: (d) => (+d.frequency > 0.008 ? -5 : 5),
},
},
axis: {
y: {
labelFormatter: '.0%',
},
},
};
return <Bar {...config} />;
};
ReactDOM.render(<DemoBar />, document.getElementById('container'));
© 版本信息
- ant-design-charts 版本: [^2.1.15]
- 浏览器环境 [chrome 最新版]
- 开发环境 [mac OS]
🚑 其他信息 [如截图等其他信息可以贴在这里]
https://github.com/ant-design/ant-design-charts/assets/22140493/69dcae1f-62c8-4d44-96c2-936ed496ae14