鱿鱼西 2022-03-01 15:55 采纳率: 85.2%
浏览 250
已结题

怎么给tooltip添加点击事件,点击某一块就会在图表下方显示tooltip中的数据

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column, G2 } from '@ant-design/plots';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { useIntl } from 'umi';
import { Heatmap } from '@ant-design/plots';

const DemoHeatmap = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('json.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

  G2.registerInteraction('element-link', {
    start: [
      {
        trigger: 'interval:mouseenter',
        action: 'element-link-by-color:link',
      },
    ],
    end: [
      {
        trigger: 'interval:mouseleave',
        action: 'element-link-by-color:unlink',
      },
    ],
  });

  const config = {
    data,
    xField: 'time',
    yField: 'eventname',
    colorField: 'value',
    shape: 'bar',
    sizeRatio: 0.5,
    color: ['#0d5fbb', '#7eadfc', '#fd8b6f', '#aa3523'],
    label: {
      style: {
        fill: '#fff',
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)',
      },
    },
    tooltip: {
      follow: true,
      enterable: true,
      offset: 5,
      customContent: (value, items) => {
        if (!items || items.length <= 0) return;
        const { data: itemData } = items[0];
        return (
          `<div class='container'>` +
          `<div class='box' style='padding: 10px 10px 10px 10px'>` +
          `<div class='title'>${itemData.time}</div>` +
          `<div class='tooltip-item' style='margin-top: 10px'><span>${itemData.eventname} </span><span>${itemData.value}  </span></div>` +
          `</div>` +
          `</div>`
          
        );
        
      },
      
    },
  };

  return <Heatmap {...config} />;
};

const Charts = () => {
  const intl = useIntl();
  return (
    <PageHeaderWrapper
      content={intl.formatMessage({
        id: 'pages.admin.subPage.title',
        defaultMessage: 'This page can only be viewed by admin',
      })}
    >
      <DemoHeatmap />
    </PageHeaderWrapper>
  );
};

export default Charts;


img

点击某一个数据,在图表下方显示tooltip中的数据
  • 写回答

2条回答 默认 最新

  • _雪菜肉丝面_ 2022-03-02 15:01
    关注

    粗看了下,大概的思路:
    1,找个地方写点击事件。
    2,找到对应数据。

    我去翻翻API

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月15日
  • 已采纳回答 3月7日
  • 修改了问题 3月1日
  • 创建了问题 3月1日

悬赏问题

  • ¥15 SD的animatediff插件报错,只出单张图片,出不来动图
  • ¥28 opencv Cuda C++编译
  • ¥15 插入sim卡4g模组反复断连
  • ¥100 如何把 16bit Bayer 图像数据转换为 TIFF RGB
  • ¥15 进行基于用户的协同过滤推荐,使用准确率和召回率评价推荐模型的效果
  • ¥15 关于#cesium#的问题:cesium 根据经纬度、高度、方位角、俯仰角和距离求另一点高度
  • ¥15 word脚注设置不起空格符号
  • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
  • ¥15 求解密json或者美化
  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例