Tooltip

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

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

  1. const F2 =require('@antv/f2/lib/core');
  2. constTooltip=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 tooltipTooltip - 图1
初始化显示 tooltipTooltip - 图2
自定义样式Tooltip - 图3
带标题的 tooltipTooltip - 图4
内容项垂直布局Tooltip - 图5

Legend Guide

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