繁体   English   中英

Typescript Recharts 自定义工具提示界面

[英]Typescript Interface for Recharts Custom Tooltip

由于不熟悉 Typescript,我正在尝试使用 Typescript 在我的 React 应用程序中为我的 Recharts 图表创建自定义工具提示内容 @types/recharts已作为devDependencies之一安装。

但是,当我如下所示定义CustomTooltip function 时,Typescript 会抛出错误

绑定元素“活动”隐式具有“任何”类型。 TS7031

我们如何解决这个问题?

const CustomTooltip = ({ active, payload, label }) => {
    if (active) {
        return (
        <div className="custom-tooltip">
            <p className="label">{`${label} : ${payload[0].value}`}</p>
            <p className="desc">Anything you want can be displayed here.</p>
        </div>
        );
    }

    return null;
}

return (
    <ComposedChart data={data}>
        ...
        <Tooltip content={<CustomTooltip />} />
    </ComposedChart>
)

尝试定义接口,但又出现了一个错误

类型“{}”缺少类型“ICustomToolip”中的以下属性:活动、有效负载、label TS2739

interface ICustomToolip {
    active: any;
    payload: any;
    label: any;
}

const CustomTooltip = ({ active, payload, label }: ICustomToolip) => {
    if (active) {
        return (
        <div className="custom-tooltip">
            <p className="label">{`${label} : ${payload[0].value}`}</p>
            <p className="desc">Anything you want can be displayed here.</p>
        </div>
        );
    }

    return null;
}

尝试执行以下操作(使用 rechart 的类型)。

但请记住,您必须添加@types/recharts npm package;)

import { TooltipProps } from 'recharts';
import {
  ValueType,
  NameType,
} from 'recharts/src/component/DefaultTooltipContent';

const CustomTooltip = ({
  active,
  payload,
  label,
}: TooltipProps<ValueType, NameType>) => {
  if (active) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload?.[0].value}`}</p>
        <p className="desc">Anything you want can be displayed here.</p>
      </div>
    );
  }

  return null;
};

return (
  <ComposedChart data={data}>
    ...
    <Tooltip content={<CustomTooltip />} />
  </ComposedChart>
);

它通常对我有用,但其他方式可能是:

const CustomTooltip = ({ active, payload, label }: any) => {

通常

TooltipProps<number, string>

但取决于你的图表数据,所以一般来说

TooltipProps<ValueType, NameType>

这是一些可以帮助人们的代码。 我正在使用 typescript 顺便说一句。 我在没有显式接口的情况下做到了这一点,只是像这样的任何类型。

                `{ 
                    'time': item.DateTime.getTime(),
                    'data': 1,
                    'change_type': "some_string",
                }`

在你的 TSX 中,确保像这样传入 undefined 。 网站上的示例很好,没有明确说明,但我的编辑抱怨了一些错误。 <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined}/>} />

对于 CustomToolTip,这对我来说很难理解。 有效负载的索引必须为 0。然后调用点运算符,因为那里有有效负载 class 来访问您的自定义属性,例如时间、数据和 change_type

    const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      return (
        <div className="custom-tooltip">
          <p className="label">{`${label} : ${payload[0].payload.time}`}</p>
          <p className="label">{`${label} : ${payload[0].payload.data}`}</p>
          <p className="label">{`${payload[0].payload.change_type}`}</p>
          <p className="desc">Anything you want can be displayed here.</p>
        </div>
      );
    }
  
    return null;
  };

然后它应该在 hover 上正确弹出,没有任何问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM