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

怎么给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 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题