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

首先使用itemTpl自定义tooltip

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

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

itemTpl

  this.chart.tooltip({showCrosshairs: true, // 展示 Tooltip 辅助线shared: true,showMarkers: false,containerTpl: `
`,itemTpl: `   
日留存:{value}%
{name}:{number}`,});

效果是这样的

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;},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！