Tooltip

Tooltip 是基于 HTML 实现的。

父组件

• <AreaChart />
• <BarChart />
• <LineChart />
• <ComposedChart />
• <PieChart />
• <RadarChart />
• <RadialBarChart />
• <ScatterChart />
• <Treemap />

Properties

• separator String

name 和 value 之间的分隔符。

默认值：' : '

• offset Number

Tooltip 与当前“游标”的偏移量。

默认值：10

• filterNull Boolean

当tooltip内容中的某条数据的值为 null 或者 undefined 时，不展示该条数据

默认值：true

• itemStyle Object

Tooltip 中每个项目（使用 li 节点渲染的）的样式。

默认值：{}

示例：

• React Inline style

• wrapperStyle Object

Tooltip 最外层节点（div）的样式。

默认值：{}

示例：

• React Inline style

• contentStyle Object

Tooltip 内部展示的内容 (div) 的样式。

默认值：{}

示例：

• React Inline style

• labelStyle Object

类目文字标签（使用

渲染）的样式。

默认值：{}

示例：

• React Inline style

• cursor Boolean | Object | ReactElement

游标相关配置，一般在类目图表展示 Tooltip 的时候，会渲染游标来标识相应的类目。如果值为 false，不渲染游标。当值为对象类型，会被解析为游标的属性，注意游标也是用 svg 元素渲染的。如果值为 React element，会克隆这个元素来展示自定义的游标。

默认值：true

格式：

<Tooltip cursor={false} /><Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} /><Tooltip cursor={<CustomizedCursor />} />

• viewBox Object

图表的可视区域。通常通过 x、y、width、height 来描述。

格式：

{ x: 0, y: 0, width: 400, height: 400 }

• active Boolean

是否处于激活状态。如果值为 true, tooltip 会显示出来。如果值为 false, tooltip 会被隐藏，这个值一般是图表内部控制的。

默认值：false

• coordinate Object

用来描述位置的坐标，也是图表内部计算的值。

默认值：{ x: 0, y: 0 }

格式：

{ x: 100, y: 140 }

• payload Array

Tooltip 展示内容的源数据，通常是图表内部计算的。

默认值：[]

格式：

[{ name: '05-01', value: 12, unit: 'kg' }]

• label String | Number optional

当 Tooltip 显示出来的时候，表示类目文字标签。

• content ReactElement | Function optional

定制 Tooltip 展示的内容。如果值为 React element，会克隆这个元素来渲染 Tooltip 的内容。如果值为函数，会调用这个函数来生成 Tooltip 的内容。

格式：

<Tooltip content={<CustomizedTooltip external={external} />} />
<Tooltip content={renderTooltip} />

示例：

• Customize tooltip content

• formatter Function optional

每个项目中“数值”的格式化函数。 如果函数返回值为数组格式，第一个元素是格式化后的“数值”，第二个元素是格式化后的“名称”

格式：

(value, name, props)  => ( return "formatted value" ) 
(value, name, props)  => ( return ["formatted value", "formatted name"， ] ) 

• labelFormatter Function optional

类目文字标签的格式化函数。

• itemSorter Function

项目排序函数。

默认值：() => -1

• isAnimationActive Boolean

当值为 false，不开启动画。

默认值：true in CSR, and false in SSR

• animationBegin Number

声明组件挂载或更新后，开始运行动画的间隔时长，单位为毫秒。

默认值：0

• animationDuration Number

声明动画的运行时长，单位为毫秒。

默认值：1500

• animationEasing 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

动画缓动函数的类型。

默认值：'ease'