ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.95k stars 364 forks source link

🐛[BUG] legend itemLabelText doesn't update #2688

Open ym-project opened 2 months ago

ym-project commented 2 months ago

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

The field legend.color.itemLabelText doesn't update.

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

Inside legend.color.itemLabelText I return the content according to the state. You should click the button. You will notice what legend label text doesn't change.

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

Legend label should be updated when the state is updated.

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

import { Column } from '@ant-design/plots';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const data = [
  { type: 'a', sold: 275 },
  { type: 'b', sold: 115 },
  { type: 'c', sold: 120 },
  { type: 'd', sold: 350 },
  { type: 'e', sold: 150 },
];

const DemoColumn = () => {
  const [state, setState] = useState(false);
  const config = {
    data,
    xField: 'type',
    yField: 'sold',
    colorField: 'type',
    legend: {
      color: {
        itemLabelText: (row) => {
          if (!state) {
            return `${row.label} hello`;
          } else {
            return `${row.label} world`;
          }
        },
      },
    },
  };

  const toggleState = () => {
    setState((state) => !state);
  };

  return (
    <div>
      <button onClick={toggleState}>Click</button>
      <Column {...config} />
    </div>
  );
};

ReactDOM.render(<DemoColumn />, document.getElementById('container'));

© 版本信息

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

NiuZhuang commented 1 month ago

Same issue here.

I fixed it by adding a unique key to the chart to force render it.