antvis/G2

【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;
  };

可能交互之间有冲突,我看看

posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests