ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] 在源数据更新后 tooltip 数据不更新
🐛 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