Skip to content

[Bug]: legend 的 itemValueText 属性在使用state动态计算时,当 state 变化后,计算的值未发生变化 #2913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 of 10 tasks
su-muzhi opened this issue May 19, 2025 · 0 comments
Labels
waiting for maintainer Triage or intervention needed from a maintainer

Comments

@su-muzhi
Copy link

su-muzhi commented May 19, 2025

Describe the bug / 问题描述

legend 的 itemValueText 属性在使用state动态计算时,当 state 变化后,计算的值未发生变化
ps: 使用 g2 v5 版本也有同样的问题

import { Pie } from '@ant-design/plots';
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const DemoPie = () => {
  const [data, setData] = useState([
    { type: '分类一', value: 27 },
    { type: '分类二', value: 25 },
    { type: '分类三', value: 18 },
    { type: '分类四', value: 15 },
    { type: '分类五', value: 10 },
    { type: '其他', value: 5 },
  ]);
  const dataRef = React.useRef(null);
  dataRef.current = data;

  const reloadData = () => {
    setData((pre) => {
      return [
        { type: '分类一', value: 27 * Math.random() },
        { type: '分类二', value: 25 * Math.random() },
        { type: '分类三', value: 18 * Math.random() },
        { type: '分类四', value: 15 * Math.random() },
        { type: '分类五', value: 10 * Math.random() },
        { type: '其他', value: 5 * Math.random() },
      ];
    });
  };

  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    innerRadius: 0.6,
    label: {
      text: 'value',
      style: {
        fontWeight: 'bold',
      },
    },
    legend: {
      color: {
        title: false,
        position: 'bottom',
        rowPadding: 5,
        itemLabelText: (d, index) => {
          console.log(dataRef.current[index]);
          return dataRef.current[index].value + '-1';
        },
      },
    },
    annotations: [
      {
        type: 'text',
        style: {
          text: 'AntV\nCharts',
          x: '50%',
          y: '50%',
          textAlign: 'center',
          fontSize: 40,
          fontStyle: 'bold',
        },
      },
    ],
  };
  return (
    <>
      <Pie {...config} />
      <button onClick={reloadData}>change data</button>
    </>
  );
};

createRoot(document.getElementById('container')).render(<DemoPie />);

Reproduction link / 复现链接

https://stackblitz.com/edit/react-ybiiygpj?file=index.js

Steps to Reproduce the Bug or Issue / 重现步骤

点击按钮可在控制台中看到数据已经发生了变化,但页面上通过 itemLabelText / itemValueText 计算出的值仍然为旧值

Version / 版本

Please select / 请选择

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
@su-muzhi su-muzhi added the waiting for maintainer Triage or intervention needed from a maintainer label May 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
waiting for maintainer Triage or intervention needed from a maintainer
Projects
None yet
Development

No branches or pull requests

1 participant