ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] 饼图联动时tooltip 在个别数据下展示有问题
🐛 bug 描述 [详细地描述 bug,让大家都能理解]
在饼图联动dom上https://charts.ant.design/zh/examples/plugin/association#association-pie,特殊数据如下: data.pie1 = [{area: "未分区", bill: 1.5}, {area: "二年级", bill: 18.72}] data.pie2 = [{area: "未分区",value: 1.54}, {area: "二年级", value: 19.33}]
📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]
tooltip 展示未对应 选中二年级的 左侧饼图展示二年级 右侧展示未分区
🏞 期望结果 [描述你原本期望看到的结果]
数据特殊 需对应下
💻 复现代码 [提供可复现的代码,仓库,或线上示例]
© 版本信息
- ant-design-charts 版本: [1.3.5]
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息 [如截图等其他信息可以贴在这里]
参考下这个:https://charts.ant.design/zh/docs/api/case#tooltip-%E8%81%94%E5%8A%A8
import React, { useState, useEffect } from 'react';
import {
Plot,
PlotEvent,
Pie,
PieConfig,
} from '@ant-design/charts';
type Base = PieConfig;
const PlotMaps: Record<string, Plot<Base>> = {};
let PreTooltipData: { label: string; total?: number, fee?: number };
const DemoLine: React.FC = () => {
const config1 = {
data: [{ label: "未分区", total: 1.54 }, { label: "二年级", total: 19.33 }],
angleField: 'total',
colorField: 'label',
}
const config2 = {
data: [{ label: "未分区", total: 1.5 }, { label: "二年级", total: 18.72 }],
angleField: 'total',
colorField: 'label',
}
const showTooltip = (date: string) => {
Object.keys(PlotMaps).forEach((plot) => {
const chartData = PlotMaps[plot].chart.getData();
for (let i = 0; i < chartData?.length; i++) {
if (chartData[i].label === date) {
const result = PlotMaps[plot].chart.getXY(chartData[i]);
console.log(result, 8888) // 这里result是undefined
let { x, y } = result
PlotMaps[plot].chart.showTooltip({ x, y });
break;
}
}
});
};
const setTooltipPosition = (evt: PlotEvent, plot: Plot<Base>) => {
const { x, y } = evt.gEvent;
const currentData = plot.chart.getTooltipItems({ x, y });
if (currentData[0]?.data.label === PreTooltipData?.label) {
return;
}
PreTooltipData = currentData[0]?.data;
showTooltip(PreTooltipData?.label);
};
return (
<div>
<Pie
style={{ width: '400px' }}
{...config1}
onReady={(plot) => {
PlotMaps.pie1 = plot;
plot.on('mousemove', (evt: PlotEvent) => {
setTooltipPosition(evt, plot);
});
}}
/>
<Pie
style={{ width: '400px' }}
{...config2}
onReady={(plot) => {
PlotMaps.pie2 = plot;
plot.on('mousemove', (evt: PlotEvent) => {
setTooltipPosition(evt, plot);
});
}} />
</div>
);
};
export default DemoLine;
这个联动demo, const result = PlotMaps[plot].chart.getXY(chartData[i]); 当两个饼图这个result一直会是undefined,但当一个pie一个line是好的,不清楚是哪里出现了问题
参考这个吧 https://codesandbox.io/s/flamboyant-moon-imbp0g?file=/index.js