提示信息(tooltip),是指当鼠标悬停在图表上的某点时,以提示框的形式展示该点的数据,比如该点的值,数据单位等。tooltip 内显示的信息完全可以通过格式化函数动态指定;通过调用 chart.tooltip(false) 即可不启用提示信息功能。Tooltip 提示信息 - 图1

tooltip 配置语法

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

  1. 设置在 chart 对象上的tooltip 样式、功能相关的配置,

  2. 设置在每个几何标记对象上的 tooltip 配置,具体如下:

(1) chart 上的 tooltip 方法

  1. chart.tooltip(true, cfg); // 开启 tooltip,并设置 tooltip 配置信息
  2. chart.tooltip(cfg); // 省略 true, 直接设置 tooltip 配置信息
  3. chart.tooltip(false); // 关闭 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. });

Tooltip 提示信息 - 图2

更详细的配置请查看 tooltip api

(2)geom 对象上的 tooltip 配置

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

这个时候 tooltip 的显示内容如下:

Tooltip 提示信息 - 图3

  1. 使用回调函数自定义 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. });
  1. 除了调用 chart.tooltip(false) 关闭 tooltip 外,还可以在 geom 上关闭 tooltip。配置方法如下:
  1. chart.point().tooltip(false);

配置示例

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

指定 tooltip 的显示信息

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

Tooltip 提示信息 - 图4

  1. const data = [
  2. { month: 0, tem: 7, city: 'tokyo' },
  3. { month: 1, tem: 6.9, city: 'tokyo' },
  4. { month: 2, tem: 9.5, city: 'tokyo' },
  5. { month: 3, tem: 14.5, city: 'tokyo' },
  6. { month: 4, tem: 18.2, city: 'tokyo' },
  7. { month: 5, tem: 21.5, city: 'tokyo' },
  8. { month: 6, tem: 25.2, city: 'tokyo' },
  9. { month: 7, tem: 26.5, city: 'tokyo' },
  10. { month: 8, tem: 23.3, city: 'tokyo' },
  11. { month: 9, tem: 18.3, city: 'tokyo' },
  12. { month: 10, tem: 13.9, city: 'tokyo' },
  13. { month: 11, tem: 9.6, city: 'tokyo' }
  14. ];
  15. const chart = new G2.Chart({
  16. container: 'c0',
  17. width: 800,
  18. height: 300
  19. });
  20. const defs = {
  21. 'month':{
  22. type: 'cat',
  23. alias: '月份', // 别名,如果没有别名显示成字段名 month
  24. values: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ]
  25. },
  26. 'tem': {
  27. alias: '温度'
  28. }
  29. };
  30. chart.source(data,defs);
  31. chart.tooltip(true, {
  32. showTitle: false // 默认标题不显示
  33. });
  34. chart.line().position('month*tem').tooltip('month*tem');
  35. chart.render();

格式化 tooltip 的显示内容

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

  1. 大部分场景下,可以使用 geom.tooltip('x*y*z', callback)chart.tooltip({ itemTpl: 'xxx'}) 的方式。

  2. 对于复杂的场景,可以监听 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() 回调

这种方式通常需要同 chart.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. );

Tooltip 提示信息 - 图5

  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.coord('theta', { innerRadius: 0.6, radius: 0.8 });
  16. chart.tooltip({
  17. showTitle: false,
  18. itemTpl: '<li>{name}: {value}</li>'
  19. });
  20. chart.intervalStack()
  21. .position('value')
  22. .color('name')
  23. .tooltip('name*value', (name, value) => {
  24. return {
  25. name: name,
  26. value: value + '%'
  27. };
  28. });
  29. chart.render();

监听 tooltip:change 事件

Tooltip 提示信息 - 图6

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

自定义 html 模板

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

  1. chart.tooltip(true, {
  2. containerTpl: '<div class="g2-tooltip">'
  3. + '<div class="g2-tooltip-title" style="margin:10px 0;"></div>'
  4. + '<ul class="g2-tooltip-list"></ul></div>',
  5. 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>'
  6. });

containerTpl tooltip 容器模板 ,注意一定要包含以下 class:

  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>

itemTpl tooltip 每项记录的默认模板:

  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 的显示样式的配置,用户可以:

  1. 在自定义模板时使用内联的方式直接定义;

  2. 在 html 页面的 style 标签内,为对应的 dom 标签设置样式;

  3. 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 辅助线配置

crosshairs.type 说明:

  • rect: 矩形框

  • x: 水平辅助线

  • y: 垂直辅助线

  • cross: 十字辅助线

‘line’, ‘area’, ‘path’ 默认会展示垂直辅助线;‘interval’, 默认会展示矩形背景框。

改变 tooltip 触发方式

通过配置 triggerOn 参数来改变 tooltip 的触发方式,可配置值为:

  • mousemove: 鼠标移动至目标区域触发,默认方式;

  • click: 鼠标点击目标区域触发

  • none: 不触发 tooltip,由用户调用 chart.showTooltip(point)chart.hideTooltip() 来控制提示框的显示隐藏。

当然在任何触发方式下,用户都可以通过调用 chart.showTooltip(point) 可以控制在固定的位置显示提示信息,参数 point 为画布上的坐标点,格式如下:

  1. const point = {
  2. x: 23,
  3. y: 30
  4. };

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

Tooltip 提示信息 - 图7

  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. const lastPoint = chart.get('plotRange').br;
  55. chart.showTooltip(lastPoint);