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

🐛[BUG] 在源数据更新后 tooltip 数据不更新

Open queee03 opened this issue 9 months ago • 2 comments

🐛 bug 描述 [详细地描述 bug,让大家都能理解]

当源数据 data 从空数据更新为新数据,图表中的 tooltip 显示出来的 value 还是为 0,但其它组件如 label/legend 拿到的值是新的。 也尝试过在数据更新后,手动拿到图表实实例调用 .render() 和 .changeData(),也无法解决。

📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]

🏞 期望结果 [描述你原本期望看到的结果]

希望 tooltip 会随源数据更新而更新。

💻 复现代码 [提供可复现的代码,仓库,或线上示例]

import { Pie } from '@ant-design/plots';

import { keys } from 'lodash';

type DevicesChartProps = {
  dataSource: Record<string, any>;
};

const DevicesChart: React.FC<DevicesChartProps> = ({ dataSource }) => {
  // const ref = useRef<Chart>(null);

  const data = keys(dataSource)
    .map((key) => ({
      name: key,
      value: dataSource[key],
    }))
    .filter((item) => item.value > 0)
    .sort((a, b) => b.value - a.value);
  const total = data.reduce((acc, item) => acc + item.value, 0);

  const config = {
    data,
    angleField: 'value',
    colorField: 'name',
    radius: 0.9,
    innerRadius: 0.6,
    scale: { color: { palette: 'paired' } },
    label: {
      // text: 'value',
      text: (d: { value: number }) => (d.value / total >= 0.01 ? d.value : ''),
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 2,
        maxCols: 1,
        // itemLabelFontSize: 12,
        itemValueText: (datum: { label?: string }) => datum.label && dataSource[datum.label],
      },
    },
    annotations: [
      {
        type: 'text',
        style: {
          text: `${total}`,
          x: '50%',
          y: '46%',
          textAlign: 'center',
          fontSize: 40,
          fontStyle: 'bold',
        },
      },
      {
        type: 'text',
        style: {
          text: `设备总数`,
          x: '50%',
          y: '54%',
          textAlign: 'center',
          fontSize: 20,
        },
      },
    ],
  };

  /**
   * NOTE 待优化。
   * 如果前面不加判断,当 data  有更新,tooltips 会拿不到最新的数据
   * 用 .render 或 .changeData 也无法解决
   */
  // return <>{data && data.length > 0 && <Pie {...config} />}</>;
  return <Pie {...config} />;
};

export default DevicesChart;

© 版本信息

  • ant-design-charts 版本: ^2.2.2
  • 浏览器环境 Chrome 124.0.6367.91
  • 开发环境 Win10

🚑 其他信息 [如截图等其他信息可以贴在这里]

queee03 avatar May 15 '24 09:05 queee03