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

🐛[BUG] 饼图联动时tooltip 在个别数据下展示有问题

Open Mr-jili opened this issue 2 years ago • 2 comments

🐛 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]

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

Mr-jili avatar Apr 14 '22 08:04 Mr-jili

参考下这个:https://charts.ant.design/zh/docs/api/case#tooltip-%E8%81%94%E5%8A%A8

lxfu1 avatar Apr 14 '22 11:04 lxfu1

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是好的,不清楚是哪里出现了问题

Mr-jili avatar Apr 16 '22 07:04 Mr-jili

参考这个吧 https://codesandbox.io/s/flamboyant-moon-imbp0g?file=/index.js

lxfu1 avatar Feb 14 '23 11:02 lxfu1