ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🐛[BUG] 拖动scrollbar, 之前的选中状态会被自动清除

Open TonyZhang1993 opened this issue 7 months ago • 0 comments

🐛 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

TonyZhang1993 avatar Jul 09 '24 13:07 TonyZhang1993