Tooltip 提示信息

    在 G2 中提供了个层次的配置 tooltip 的方法，

    • 设置在 chart 对象上的tooltip 样式、功能相关的配置，
    • 设置在每个几何标记对象上的 tooltip 配置，具体如下：
      （1） chart 上的 tooltip 方法

    常用的 tooltip 配置信息如下，注意，G2 的 tooltip 是使用 html 进行渲染的。

    1. chart.tooltip({
    2.   triggerOn: 'mousemove' | 'click' | 'none', // tooltip 的触发方式，默认为 mousemove 
    3.   showTitle: {boolean}, // 是否展示 title，默认为 true
    4.   crosshairs: {
    5.     type: 'rect' || 'x' || 'y' || 'cross',
    6.     style: {
    7.       // 图形样式
    8.     }
    9.   }, // tooltip 辅助线配置
    10.   offset: 10, // tooltip 距离鼠标的偏移量
    11.   containerTpl: '<div class="g2-tooltip">'
    12.     + '<div class="g2-tooltip-title" style="margin:10px 0;"></div>'
    13.     + '<ul class="g2-tooltip-list"></ul></div>', // tooltip 容器模板
    14.   itemTpl: '<li data-index={index}><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}: {value}</li>', // tooltip 每项记录的默认模板
    15.   inPlot: true, // 将 tooltip 展示在指定区域内
    16.   follow: true， // tooltip 是否跟随鼠标移动
    17.   shared: true || false, // 默认为 true, false 表示只展示单条 tooltip
    18.   position: 'left' || 'right' || 'top' || 'bottom' // 固定位置展示 tooltip
    19. });

    更详细的配置请查看 。

    （2）geom 对象上的 tooltip 配置

    • 可以在 geom 几何标记上配置 tooltip 的显示内容，如下语法所示：
    1. chart.<geom>.tooltip('field1*field2...*fieldN');

    image

    • 使用回调函数自定义 tooltip 信息, 默认情况下tooltip 的每一项包含以下信息：
    • title 标题，默认tooltip 的标题取第一项的 title
    • name 标题
    • value 值
    • color 图例项对应的颜色
    • index 索引值 所以在回调函数中可以通过修改这几个值，达到自定义tooltip 的目的
    1. chart.<geom>.tooltip('a*b', (a, b) => {
    2.   return {
    3.     name: a,
    4.     value: b
    5.   };
    6. });
    • 除了调用 chart.tooltip(false) 关闭 tooltip 外，还可以在 geom 上关闭 tooltip。配置方法如下：
    1. chart.point().tooltip(false);

    tooltip 的目的是为了展示数据点相关的数据，具体展示的内容完全可以通过多种灵活的方式来实现。

    如果 G2 默认生成的 tooltip 展示内容不满足需求，用户可以通过调用几何标记的 tooltip 方法手动指定要显示的 tooltip 内容。

    当需要格式化 tooltip 的显示内容时，有两种方式：

    • 大部分场景下，可以使用 geom.tooltip('xyz', callback) 同 chart.tooltip({ itemTpl: 'xxx'}) 的方式。
    • 对于复杂的场景，可以监听 chart 对象上的 tooltip:change 事件。这个事件会返回如下参数：
    1. {
    2.   x: 当前鼠标的 x 坐标,
    3.   y: 当前鼠标的 y 坐标,
    4.   tooltip: 当前的 tooltip 对象
    5.   items: 数组对象，当前 tooltip 显示的每条内容
    6. }

    每一项的内容

    • title 标题，默认tooltip 的标题取第一项的 title
    • name 标题
    • value 值
    • color 图例项对应的颜色
    • index 索引值
      通过修改 items 的内容就可以修改 tooltip 的展示内容了。

    使用 geom.tooltip() 回调

    1. //自定义模板，自定义tooltip展示
    2. chart.tooltip({
    3.   itemTpl: '<li>{x}: {y}</li>'
    4. });
    5. chart.line().position('x*y').tooltip('x*y', (x, y) => {
    6.   return {
    7.     x, 
    8.     y
    9.   }; // 返回的参数名对应 itemTpl 中的变量名
    10. );
    1. const data = [
    2.   { name: 'Microsoft Internet Explorer', value: 30 },
    3.   { name: 'Chrome', value: 20 },
    4.   { name: 'Firefox', value: 10 },
    5.   { name: 'Safari', value: 10 },
    6.   { name: 'Opera', value: 15 },
    7.   { name: 'Others', value: 15 }
    8. ];
    9. const chart = new G2.Chart({
    10.   container: 'c1',
    11.   forceFit: true,
    12.   height: 400
    13. });
    14. chart.source(data);
    15. chart.tooltip({
    16.   showTitle: false,
    17.   itemTpl: '<li>{name}: {value}</li>'
    18. });
    19. chart.intervalStack()
    20.   .position('value')
    21.   .color('name')
    22.   .tooltip('name*value', (name, value) => {
    23.     return {
    24.       name: name,
    25.       value: value + '%'
    26.     };
    27.   });
    28. chart.render();

    监听 tooltip:change 事件

    1. const data = [ // 数据
    2.   { time: 1428163200000, start: 469, end: 480 },
    3.   { time: 1428163203600, start: 480, end: 430 },
    4.   { time: 1428163207200, start: 430, end: 410 },
    5.   { time: 1428163210800, start: 410, end: 420 },
    6.   { time: 1428163214400, start: 420, end: 440 },
    7.   { time: 1428163218000, start: 440, end: 460 },
    8.   { time: 1428163221600, start: 460, end: 410 },
    9.   { time: 1428163225200, start: 410, end: 440 },
    10.   { time: 1428163228800, start: 440, end: 490 }
    11. ];
    12.  
    13. const DataView = DataSet.DataView;
    14. const dv = new DataView();
    15. dv.source(data).transform({
    16.   type: 'map', 
    17.   callback: obj => {
    18.     obj.range = [ obj.start, obj.end ];
    19.     obj.trend = (obj.start <= obj.end) ? '上涨' : '下跌';
    20.     return obj;
    21.   }
    22. });
    23.  
    24. const chart = new G2.Chart({
    25.   container: 'c2',
    26.   width: 800,
    27.   height: 400,
    28.   padding: [ 20, 50, 95, 80 ]
    29. });
    30. chart.source(dv, {
    31.   'time': { // 设置日期类型
    32.     type: 'time',
    33.     mask: 'YYYY-MM-DD HH:MM:ss'
    34.   },
    35.   'trend': { 
    36.     alias: '趋势'
    37.   }
    38. });
    39. chart.interval()
    40.   .position('time*range')
    41.   .color('trend', [ '#1bbd19', '#fa513a' ])
    42.   .size(20);
    43. chart.render();
    44. chart.on('tooltip:change', function(ev) {
    45.   const items = ev.items; // tooltip显示的项
    46.   const origin = items[0]; // 将一条数据改成多条数据
    47.   const range = origin.point._origin.range;
    48.   items.splice(0); // 清空
    49.   items.push(Object.assign({
    50.     name: '开始值',
    51.     marker: true,
    52.     value: range[0]
    53.   }, origin));
    54.   items.push(Object.assign({
    55.     name: '结束值',
    56.     marker: true,
    57.     value: range[1]
    58.   }, origin));
    59. });

    G2 也支持使用自定义的 html 展示 tooltip。配置方法如下：

    1. <div class="g2-tooltip">
    2.   <!-- tooltip 标题 -->
    3.   <div class="g2-tooltip-title" style="margin:10px 0;"></div>
    4.   <!-- tooltip 内容列表容器 -->
    5.   <ul class="g2-tooltip-list"></ul>
    6. </div>
    1. <li data-index={index}>
    2.   <!-- 每项记录的 marker -->
    3.   <span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
    4.   {name}: {value}
    5. </li>

    对于 tooltip 的显示样式的配置，用户可以：

    • 在 html 页面的 style 标签内，为对应的 dom 标签设置样式；
    • 在 chart.tooltip(cfg) 中设置属性，如下，具体的说明详见 API
    1. chart.tooltip({
    2.   'g2-tooltip': {
    3.     position: 'absolute',
    4.     visibility: 'hidden',
    5.     border : '1px solid #efefef',
    6.     backgroundColor: 'white',
    7.     color: '#000',
    8.     opacity: "0.8",
    9.     padding: '5px 15px',
    10.     'transition': 'top 200ms,left 200ms'
    11.   }, // 设置 tooltip 的 css 样式
    12.   'g2-tooltip-list': {
    13.     margin: '10px'
    14.   }
    15. });

    默认线图和区域图会显示辅助线、柱状图会显示辅助框，当用户需要显示辅助线（框）时，可以通过配置 crosshairs 属性设置，crosshairs 支持四种展示形式：

    1. crosshairs: {
    2.   type: 'rect' || 'x' || 'y' || 'cross',
    3.   style: {
    4.     // 图形样式
    5.   }
    6. }, // tooltip 辅助线配置
    • rect: 矩形框
    • x: 水平辅助线
    • y: 垂直辅助线
    • cross: 十字辅助线
      ‘line’, ‘area’, ‘path’ 默认会展示垂直辅助线；‘interval’， 默认会展示矩形背景框。

    通过配置 参数来改变 tooltip 的触发方式，可配置值为：

    • mousemove: 鼠标移动至目标区域触发，默认方式；
    • click: 鼠标点击目标区域触发
    • none: 不触发 tooltip，由用户调用 chart.showTooltip(point) 和 chart.hideTooltip() 来控制提示框的显示隐藏。
      当然在任何触发方式下，用户都可以通过调用 chart.showTooltip(point) 可以控制在固定的位置显示提示信息，参数 为画布上的坐标点，格式如下：

    另外还提供了 chart.getXY({xField: value, yField: value}) 方法，用于获取数据对应在画布空间的坐标。

    1. const data = [
    2.   { time: '2016-10-25 00:00:00', runCount: 4, type: 2, runTime: 2 },
    3.   { time: '2016-10-25 00:30:00', runCount: 2, type: 6, runTime: 3 },
    4.   { time: '2016-10-25 01:00:00', runCount: 13, type: 2, runTime: 5 },
    5.   { time: '2016-10-25 01:30:00', runCount: 9, type: 9, runTime: 1 },
    6.   { time: '2016-10-25 02:00:00', runCount: 5, type: 2, runTime: 3 },
    7.   { time: '2016-10-25 02:30:00', runCount: 8, type: 2, runTime: 1 },
    8.   { time: '2016-10-25 03:00:00', runCount: 13, type: 1, runTime: 2 },
    9.   { time: '2016-10-25 03:30:00', runCount: 4, type: 2, runTime: 2 },
    10.   { time: '2016-10-25 04:00:00', runCount: 2, type: 6, runTime: 3 },
    11.   { time: '2016-10-25 04:30:00', runCount: 13, type: 2, runTime: 5 },
    12.   { time: '2016-10-25 05:00:00', runCount: 9, type: 9, runTime: 1 },
    13.   { time: '2016-10-25 05:30:00', runCount: 5, type: 2, runTime: 3 }
    14. ];
    15. const chart = new G2.Chart({
    16.   container: 'c3',
    17.   forceFit: true,
    18.   height: 300,
    19.   padding: [ 50, 80 ]
    20. });
    21. chart.source(data);
    22. chart.scale('time',{
    23.   type: 'timeCat',
    24.   mask: 'HH:MM',
    25.   tickCount:12,
    26.   nice:true,
    27. });
    28. chart.scale('runCount', {
    29.   alias: '运行数量',
    30.   min: 0
    31. });
    32. chart.scale('runTime', {
    33.   alias: '运行时间(ms)'
    34. });
    35. chart.tooltip({
    36.   triggerOn: 'click' // 鼠标点击触发 tooltip
    37. }); // 关闭 tooltip
    38. chart.legend(false); // 不显示图例
    39. chart.line()
    40.   .position('time*runTime')
    41.   .color('#5ed470')
    42.   .size(2)
    43.   .shape('smooth'); // 绘制曲线图
    44. chart.point()
    45.   .position('time*runTime')
    46.   .color('#5ed470')
    47.   .size(5)
    48.   .shape('circle')
    49.   .style({
    50.     cursor: 'pointer'
    51.   }); // 绘制点图
    52. chart.render();
    53.  
    54. // 初始化到最新一个点
    55. chart.showTooltip(lastPoint);