下面提到的 tooltip 等同于提示信息。

配置方式

tooltip 如果不配置，默认开启。

关闭 tooltip

  1. config.tooltip = false;
  2. // or
  3. config.tooltip = { visible: false };

开启配置

  1. config = {
  2.   tooltip: {},
  3. };

配置列表

G2

triggerOn: string

tooltip 的触发方式，可配置的值为：mousemove、click、none，默认为 mousemove。

  • ‘mousemove’: 鼠标移动触发；
  • ‘click’: 鼠标点击出发；
  • ‘none’: 不触发 tooltip，用户通过 chart.showTooltip() 和 chart.hideTooltip() 来控制 tooltip 的显示和隐藏

showTitle: boolean

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

title: string

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

crosshail: object

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

默认我们为 geom 为 ‘line’, ‘area’, ‘path’, ‘areaStack’ 开启了垂直辅助线；geom 为‘interval’ 默认会展示矩形背景框。

该属性可支持的配置如下：

  1. crosshairs: {
  2.   type: 'rect' | 'x' | 'y' | 'cross',
  3.   style: {
  4.     // 图形样式
  5.     fill: {string}, // 填充的颜色
  6.     stroke: {string}, // 边框的颜色
  7.     strokeOpacity: {number}, // 边框颜色的透明度，数值为 0 - 1 范围
  8.     fillOpacity: {number}, // 填充的颜色透明度，数值为 0 - 1 范围
  9.     lineWidth: {number}, // 边框的粗细
  10.     lineDash: {number} | {array} // 线的虚线样式
  11.   }
  12. }

offset: number

设置 tooltip 距离鼠标的偏移量

inPlot: boolean

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

shared: boolean

设置 tooltip 只展示单条数据。

enterable: boolean

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

position: string

该属性设置之后，就会在固定位置展示 tooltip，可设置的值为：left、right、top、bottom。

hideMarkers: boolean

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

containerTpl: string

tooltip 默认的容器模板，默认值如下：

  1. containerTpl: '<div class="g2-tooltip">'
  2.   + '<div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>'
  3.   + '<ul class="g2-tooltip-list"></ul>'
  4.   + '</div>',

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

itemTpl: string

tooltip 每项记录的默认模板，默认值如下：

  1. itemTpl: '<li data-index={index}>' +
  2.   '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>' +
  3.   '{name}: {value}' +
  4.   '</li>';

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

g2-tooltip: object

设置 tooltip 容器的 CSS 样式。

g2-tooltip-title: object

设置 tooltip 标题的 CSS 样式。

g2-tooltip-list: object

设置 tooltip 列表容器的 CSS 样式。

g2-tooltip-list-item: object

设置 tooltip 列表容器中每一项的 CSS 样式。

g2-tooltip-marker: object

设置 tooltip 列表容器中每一项 marker 的 CSS 样式。

外部 css 控制

除了使用配置上述属性来自定义 tooltip 的样式外，用户也可以直接为 html 定义 CSS 样式。

参考样例：

  1. config.tooltip = {
  2.   containerTpl:
  3.     '<div class="g2-tooltip">' +
  4.     '<p class="g2-tooltip-title"></p>' +
  5.     '<table class="g2-tooltip-list"></table>' +
  6.     '</div>', // tooltip的外层模板
  7.   itemTpl:
  8.     '<tr class="g2-tooltip-list-item"><td style="color:{color}">{name}</td><td>{value}</td></tr>', // 支持的字段 index,color,name,value
  9.   offset: 50,
  10.   'g2-tooltip': {
  11.     position: 'absolute',
  12.     visibility: 'hidden',
  13.     border: '1px solid #efefef',
  14.     backgroundColor: 'white',
  15.     color: '#000',
  16.     opacity: '0.8',
  17.     padding: '5px 15px',
  18.     transition: 'top 200ms,left 200ms',
  19.   }, // 设置 tooltip 的 css 样式
  20.   'g2-tooltip-list': {
  21.     margin: '10px',
  22.   },
  23. };

Console-Chart

sort: String|Function

tooltip 排序，传入类型为 string 时，可选值有’asc’，’desc’