Tooltip

Tooltip 作为 F2 的插件，如要使用，请将其注册如 Chart 类或者 chart 实例。

如果你默认加载的是完整的 F2 代码，那么 Tooltip 已经注册至 Chart 类中，如果您采用动态引用的策略，那么需要先将该组件注册入 Chart 类或者 Chart 实例。

  1. const F2 = require('@antv/f2/lib/core');
  2. const Tooltip = require('@antv/f2/lib/plugin/tooltip');
  3. F2.Chart.plugins.register(Tooltip); // 方式一：全局注册
  4.  
  5. // 方式二：具体的 chart 实例注册
  6. const chart = new F2.Chart({
  7.   id: 'canvas',
  8.   plugins: Tooltip
  9. });

API

  1. chart.tooltip(false); // 关闭 tooltip
  2. chart.tooltip({
  3.   alwaysShow: false, // 当移出触发区域，是否仍显示提示框内容，默认为 false，移出触发区域 tooltip 消失，设置为 true 可以保证一直显示提示框内容
  4.   offsetX: 0, // x 方向的偏移
  5.   offsetY: 0, // y 方向的偏移
  6.   triggerOn: [ 'touchstart', 'touchmove' ], // tooltip 出现的触发行为，可自定义，用法同 legend 的 triggerOn
  7.   triggerOff: 'touchend', // 消失的触发行为，可自定义
  8.   showTitle: false, // 是否展示标题，默认不展示
  9.   showCrosshairs: false, // 是否显示辅助线，点图、路径图、线图、面积图默认展示
  10.   crosshairsStyle: {
  11.     stroke: 'rgba(0, 0, 0, 0.25)',
  12.     lineWidth: 2
  13.   }, // 配置辅助线的样式
  14.   showTooltipMarker: true, // 是否显示 tooltipMarker
  15.   tooltipMarkerStyle: {
  16.     fill: '#fff' // 设置 tooltipMarker 的样式
  17.   },
  18.   background: {
  19.     radius: 2,
  20.     fill: '#1890FF',
  21.     padding: [ 6, 10 ]
  22.   }, // tooltip 内容框的背景样式
  23.   titleStyle: {
  24.     fontSize: 24,
  25.     fill: '#fff',
  26.     textAlign: 'start',
  27.     textBaseline: 'top'
  28.   }, // tooltip 标题的文本样式配置，showTitle 为 false 时不生效
  29.   nameStyle: {
  30.     fontSize: 24,
  31.     fill: '#fff',
  32.     textAlign: 'start',
  33.     textBaseline: 'middle'
  34.   }, // tooltip name 项的文本样式配置
  35.   valueStyle: {
  36.     fontSize: 24,
  37.     fill: '#fff',
  38.     textAlign: 'start',
  39.     textBaseline: 'middle'
  40.   }, // tooltip value 项的文本样式配置
  41.   showItemMarker: true, // 是否展示每条记录项前面的 marker
  42.   itemMarkerStyle: {
  43.     radius: 7,
  44.     symbol: 'circle',
  45.     lineWidth: 2,
  46.     stroke: '#fff'
  47.   }, // 每条记录项前面的 marker 的样式配置
  48.   custom: {Boolean}, // 是否自定义 tooltip 提示框
  49.   onShow(obj) {
  50.     // obj: { x, y, title, items }
  51.   }, // tooltip 显示时的回调函数
  52.   onHide(obj) {
  53.     // obj: { x, y, title, items }
  54.   }, // tooltip 隐藏时的回调函数
  55.   onChange(obj) {
  56.     // obj: { x, y, title, items }
  57.   } // tooltip 内容发生改变时的回调函数
  58. });

示例：

在移动端，我们经常会将 tooltip 同 legend 一起使用，这个时候我们就可以通过配置 custom 属性来实现。(手机端观看)

  1.     const data =[
  2.       { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  3.       { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  4.       { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  5.       { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  6.       { name: 'London', 月份: 'May.', 月均降雨量: 47 },
  7.       { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  8.       { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  9.       { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  10.       { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  11.       { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  12.       { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  13.       { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  14.       { name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
  15.       { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  16.       { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  17.       { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
  18.     ];
  19.     const chart = new F2.Chart({
  20.       id: 'mountNode',
  21.       pixelRatio: window.devicePixelRatio,
  22.       width: 400,
  23.       height: 260
  24.     });
  25.     chart.source(data);
  26.     chart.tooltip({
  27.       custom: true, // 自定义 tooltip 内容框
  28.       onChange: function(obj) {
  29.         const legend = chart.get('legendController').legends.top[0]; // 获取 legend
  30.         const tooltipItems = obj.items;
  31.         const legendItems = legend.items;
  32.         const map = {};
  33.         legendItems.map(item => {
  34.           map[item.name] = F2.Util.mix({}, item);
  35.         });
  36.         tooltipItems.map(item => {
  37.           const { name, value } = item;
  38.           if (map[name]) {
  39.             map[name].value = value;
  40.           }
  41.         });
  42.         legend.setItems(Object.values(map));
  43.       },
  44.       onHide(tooltip) {
  45.         const legend = chart.get('legendController').legends.top[0];
  46.         legend.setItems(chart.getLegendItems().country);
  47.       }
  48.     });
  49.  
  50.     chart.interval().position('月份*月均降雨量')
  51.       .color('name')
  52.       .adjust({
  53.         type: 'dodge',
  54.         marginRatio: 0.05
  55.       });
  56.     chart.render();

DEMO

场景描述 demo
自定义 HTML tooltip Tooltip - 图1
初始化显示 tooltip Tooltip - 图2
自定义样式 Tooltip - 图3
带标题的 tooltip Tooltip - 图4
内容项垂直布局 Tooltip - 图5

Legend Guide

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/tooltip.html