antvis/G2

The issue has been closed
【V5】当条形图使用scrollbar时,当拖拽滑块后,无法选择柱状图。 #5619
18019675002 posted onGitHub
【V 5.1.5】当条形图使用scrollbar时,当拖拽滑块后,无法选择柱状图, 请问如何解决?
1.拖拽滚动条前可以选择,并打印出选择的数据 <img width="938" alt="截屏2023-10-08 17 59 16" src="https://github.com/antvis/G2/assets/23647182/e5de8bd1-31b8-41ce-a279-d1685579d07c">
2.拖动滚动条后,无法选择,并打印的数据是 null <img width="941" alt="截屏2023-10-08 17 59 44" src="https://github.com/antvis/G2/assets/23647182/293fb587-b250-40d3-9abc-a14948fc9ccb">
3.以下是我的代码:
handleBuildChartBack = (container) => {
const { data } = this.props;
console.log(data);
const chart = new Chart({
container: container,
autoFit: true,
title: '商品构成',
});
this.chart = chart;
chart.axis('x', { title: false, label: false }).axis('y', { title: '单量', titleFill: '#5dd3ca' });
chart
.interval()
.style('stroke', '#1296db')
.style('strokeWidth', '0')
.data(data)
.encode('x', 'name')
.encode('y', 'qty')
// 滑块设置
.scrollbar('x', { ratio: 0.3 })
.scale('y', { nice: true }) // 视图层级的比例尺设置
.interaction('elementSelect', { single: true }) //
.state('selected', { fill: 'orange' })
.state('unselected', { opacity: 0.5 })
// .state('single', true)
.label([
{
text: 'qty',
fontSize: 12,
dy: -15,
},
{
text: 'name',
position: 'bottom',
// fill: '#000', // 指定样式
dy: 0,
formatter: (text, datum, index, data) => {
return '';
},
},
]);
chart.on('element:select', (event) => {
const { data, nativeEvent } = event;
if (nativeEvent) {
console.log(data);
}
});
chart.render();
return chart;
};