F2 has modular structure provides best tree-shaking results and package size optimization.
If you just import F2 from '@antv/f2'
, then it has included tooltip by default. But if you want a better package size optimization, you can register manually:
const F2 = require('@antv/f2/lib/core');const Tooltip = require('@antv/f2/lib/plugin/tooltip');// Method 1: Global RegisterationF2.Chart.plugins.register(Tooltip);// Or Method2: Registeration for a Chart instanceconst chart = new Chart({id: 'canvas',plugins: Tooltip});
If you call chart.tooltip(false)
, tooltip will not be rendered.
Below is the method for configuring tooltip, the detail properties can be found in table.
chart.tooltip({// see detail properties in table});
Name | Type | Default | Description |
| Boolean | false | Whether the tooltip is still show when the touch area is not in the chart.It can be set to be |
| Number | 0 | Tooltip offset in x direction. |
| Number | 0 | Tooltip offset in y direction. |
| String / Array | [ 'touchstart', 'touchmove' ] | The event that will trigger tooltip. |
| String / Array | 'touchend' | The event that will hide tooltip. |
| Boolean | false | Wether to show the title. |
| Boolean | | Wether to show the tooltip crosshairs. The default value of different charts is different, point, line, area and path will show by default. |
| Object | | Style of the crosshairs line, default setting is:
|
| Boolean | true | Wether to display tooltipMarker. |
| Object | | Style of the tooltipMarker. |
| Object | | The background style of tooltip content box. |
| Object | | Style for tooltip's title, invalid if showTitle is |
| Object | | Style for each tooltip item's name part. |
| Object | | Style for each tooltip item's value part. |
| Boolean | true | Wether to show the each tooltip item's marker. |
| Object | | Style for each tooltip item's marker. |
| Boolean | false | Wether to custom the tooltip. See custom tooltip. |
| Function | | Callback when the tooltip show. See callback. |
| Function | | Callback when the tooltip hide. See callback. |
| Function | | Callback when the tooltip content change. See callback. |
The picture below shows the structure of tooltip content, it includes title and a group of items, each item consists of marker, name and value.
The tooltip items passed to the tooltip onShow
, onChange
, onHide
callbacks implement the following interface:
{// X position of matching tooltip itemx: Number,// Y position of matching tooltip itemy: Number,// Color of matching tooltip itemcolor: String,// The data of matching tooltip itemorigin: Object,// The value of the `name` attribute in tooltip itemname: String,// The value of the `value` attribute in tooltip itemvalue: String / Number,// The title of current tooltiptitle: String// The marker of matching tooltip itemmarker: Object}
We can use onShow
callback to change the tooltip's show content. It will trigger when the tooltip is shown.
chart.tooltip({onShow(obj) {}});// The following is the parameter `Obj` interface{// X position of current eventx: Number,// Y position of current eventy: Number,// The tootlip instancetooltip: Object// Tooltip content itemsitems: Array,// The style of tooltipMarkertooltipMarkerCfg: Object}
As following example, we will change the value of name to the value of title, see demo and code here.
chart.tooltip({onShow: function onShow(ev) {var items = ev.items;items[0].name = items[0].title;}});
It will trigger when the tooltip's content changed. Usually combined with the custom
attribute for custom tooltip.
chart.tooltip({onChange(obj) {}});// The following is the parameter `Obj` interface{// X position of current eventx: Number,// Y position of current eventy: Number,// The tootlip instancetooltip: Object// Tooltip content itemsitems: Array,// The style of tooltipMarkertooltipMarkerCfg: Object}
It will trigger when the tooltip is disappeared.
chart.tooltip({onHide(obj) {}});// The following is the parameter `Obj` interface{// The tootlip instancetooltip: Object}
Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an canvas one or combined with legend.
On mobile, in order to make better use of the screen size, the tooltip and legend are often combined in the chart design. Like this:
In F2, we can use a custom tooltip to implement, see demo and code here:
chart.tooltip({custom: true, // requiredonChange(obj) {var legend = chart.get('legendController').legends.top[0]; // get the top legend instancevar tooltipItems = obj.items;var legendItems = legend.items;var map = {};legendItems.map(function(item) {map[item.name] = _.clone(item);});tooltipItems.map(function(item) {var name = item.name;var value = item.value;if (map[name]) {map[name].value = value;}});legend.setItems(_.values(map)); // update legend items},onHide: function onHide() {var legend = chart.get('legendController').legends.top[0];legend.setItems(chart.getLegendItems().country); // revert the original items of the legend}});
We also can define a html tooltip, like this, see demo and code here:
chart.tooltip({custom: true,showCrosshairs: false,onChange: function onChange(ev) {var tooltipEl = $('.f2-tooltip'); // get the tooltip html elementvar currentData = ev.items[0];var text = currentData.value;tooltipEl.html(['<span>' + currentData.origin.date + '</span>', '<span>' + 'Web Visits: <b>' + text + '</b></span>'].join(''));tooltipEl.css({opacity: 1,left: canvasOffsetLeft + currentData.x - tooltipEl.outerWidth() / 2 + 'px',top: canvasOffsetTop + currentData.y - tooltipEl.outerHeight() - 15 + 'px'});},onHide: function onHide() {var tooltipEl = $('.f2-tooltip');tooltipEl.css({opacity: 0});}});
Or Like this, combine with Guide.Html and Tooltip, see demo and code here:
chart.guide().html({position: ['min', 'max'],html: '<div id="tooltipWrapper" style="height: 45px;background-color:#E9F1FF;line-height: 45px;">' + '<div id="tooltipName" style="float:left;font-size:12px;color:#2E2E2E;"></div>' + '<div id="tooltipValue" style="float:right;font-size:12px;color:#2E2E2E;"></div>' + '</div>',offsetY: -22.5});chart.tooltip({showCrosshairs: true,custom: true,onChange: function onChange(obj) {var items = obj.items;var originData = items[0].origin;var date = originData.date;var value = originData.value;var tag = originData.tag;$('#tooltipWrapper').width($('#mountNode').width());$('#tooltipWrapper').css('left', 0);$('#tooltipName').css('margin-left', 15);$('#tooltipValue').css('margin-right', 15);if (tag === 1) {$('#tooltipName').html(date + '<img style="width:27.5px;vertical-align:middle;margin-left:3px;" src="https://gw.alipayobjects.com/zos/rmsportal/RcgYrLNGIUfTytjjijER.png">');} else if (tag === 2) {$('#tooltipName').html(date + '<img style="width:27.5px;vertical-align:middle;margin-left:3px;" src="https://gw.alipayobjects.com/zos/rmsportal/XzNFpOkuSLlmEWUSZErB.png">');} else {$('#tooltipName').text(date);}var color;if (value >= 0) {color = '#FA541C';} else {color = '#1CAA3D';}$('#tooltipValue').html('涨幅:<span style="color:' + color + '">' + items[0].value + '</span>');$('#tooltipWrapper').show();},onHide: function onHide() {$('#tooltipWrapper').hide();}});
Demo | demo |
| |
| |
styling | |
| |
|