tooltip: Add a tooltip to a chart

Description Usage Arguments

Description

Chart tooltip. The tooltip appears around the cursor when hovering on the plot.

Usage

1

Arguments

triggerOn

One of "mousemove", "click", or "none" specifying the action that triggers the tooltip, defaults to "mousemove". If "none" then the tooltip can be trigger with the following chart object methods, showTooltip() and hideTooltip().

tooltip 的触发方式,可配置的值为:'mousemove'、'click'、'none',默认为 mousemove。

showTitle

TRUE or FALSE, if TRUE then a title is added tooltip.

是否展示提示信息的标题,默认为 true,即展示,通过设置为 false 来隐藏标题。

title

A character string specifying the title of the tooltip.

设置 tooltip 的标题展示的数据字段,设置该字段后,该标题即会展示该字段对应的数值。showTitle 为 false 时,该设置不生效。

crosshairs

A list (config object) specifying properties of the crosshairs for geoms line, area, path, and areaStack. Also, interval geom?

是一个对象类型,用于设置 tooltip 的辅助线或者辅助框。

offset

A number specifying the buffer between the mouse and the tooltip.

设置 tooltip 距离鼠标的偏移量。

inPlot

TRUE or FALSE, if TRUE the tooltip is contained within the boundaries of the chart, defaults to TRUE.

设置是否将 tooltip 限定在绘图区域内,默认为 true,即限定在绘图区域内。

follow

TRUE or FALSE, if TRUE the tooltip follows the mouse, defaults to TRUE. Not sure what this looks like if FALSE or if triggerOn is not "mousemove".

设置 tooltip 是否跟随鼠标移动。默认为 true,即跟随。

shared

TRUE or FALSE, <tbd>

设置 tooltip 只展示单条数据。

enterable

TRUE or FALSE, if TRUE the mouse may enter the tooltip, defaults to FALSE.

用于控制是否允许鼠标进入 tooltip,默认为 false,即不允许进入。

position

One of "top", "right", "bottom", or "left" specifying a fixed position for the tooltip.

hideMarkers

TRUE or FALSE, if TRUE the small highlight added around the current selected point or bar is not shown, defaults to FALSE.

对于 line、area、path 这三种几何图形,我们在渲染 tooltip 时会自动渲染 tooltipMarker ,通过声明该属性值为 true 来关闭 tooltipMarker。

containerTpl

A character string specifying an HTML template for the tooltip container. Defaults to,

<div class="g2-tooltip">
  <div class="g2-tooltip-title" style="margin:10px 0;"></div>
  <ul class="g2-tooltip-list"></ul>
</div>

如默认结构不满足需求,可以自定义该模板,但是自定义模板时必须包含各个 dom 节点的 class,样式可以自定义。

itemTpl

A character string specifying an HTML template for each item/field included in the tooltip. Defaults to,

<li data-index={index}>
  <span style="background-color:{color};width:8px;height:8px;border-radius:50
  {name}: {value}
</li>

如默认结构不满足需求,可以自定义该模板,但是自定义模板时必须包含各个 dom 节点的 class,样式可以自定义。

g2-tooltip

CSS to apply to the class. Important, a separate style sheet may instead define styles for the .g2-tooltip class.

g2-tooltip-title

CSS.

g2-tooltip-list

CSS.

g2-tooltip-list-item

CSS.

g2-tooltip-marker

CSS.


nteetor/golly documentation built on May 16, 2019, 8:12 p.m.