antv/g2图表tooltip自定义并展示坐标之外的数据

首先使用itemTpl自定义tooltip

- 效果是这样的
- tooltip展示坐标之外的数据

感觉Antv文档很不详细，写这块时找了好久才找到方法，现在记一下，方便今后的观看和其他遇到此问题的同学解决办法。

itemTpl

  this.chart.tooltip({showCrosshairs: true, // 展示 Tooltip 辅助线shared: true,showMarkers: false,containerTpl: `<div class="g2-tooltip"><p class="g2-tooltip-title"></p><ul class="g2-tooltip-list"></ul></div>`,itemTpl: `   <ul class="g2-tooltip-list"><li class="g2-tooltip-list-item"><span class="g2-tooltip-marker" style="background-color: #5e92f6;"></span><span class="g2-tooltip-name">日留存</span>:<span class="g2-tooltip-value">{value}%</span></li><li class="g2-tooltip-list-item"><span class="g2-tooltip-marker" style="background-color: #53e4ca;"></span><span class="g2-tooltip-name">{name}</span>:<span class="g2-tooltip-value">{number}</span></li></ul>`,});

效果是这样的

在这里插入图片描述

itemTpl主要就是看到的背景色，颜色等样式。

tooltip展示坐标之外的数据

其实正常的划线就是 this.chart.line().position('time*value')，time是X轴，value是Y轴。但是此时我们需要鼠标划入时展示其他的数据，那么就如下代码，在正常的划线后加入 tooltip属性，并把需要显示的数据写进里面就可以了

       this.chart.line().position('time*value').tooltip('time*value*name*number', (time, value, name, number) => {return {name: name,  //此处name对应itemTpl模板中name，以下两个参数类推value: value,number: number}});this.chart.point().position('time*value').tooltip('time*value*name*number',function(time, value, name, number){return {name: name,value: value,number: number}});

数据格式转化要显示的Y轴数据应去掉双引号

dataDealwith(){var data=this.chartData;var newData=[];data.forEach(function(obj){for (var prop in obj) {if (prop == "value") {if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {obj[prop] = +obj[prop];}}}newData.push(obj)})return newData;},