網站首頁 編程語言 正文
首先使用itemTpl自定義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;
},
原文鏈接:https://blog.csdn.net/Zan_Z/article/details/122489602
- 上一篇:taro將頁面滾動到指定位置
- 下一篇:H5移動端點擊出現背景藍色框的解決方案
相關推薦
- 2022-03-27 關于Android?Device?Monitor?無法打開問題_Android
- 2022-09-05 SpringBoot 自動配置原理
- 2021-11-25 使用Oracle命令進行數據庫備份與還原_oracle
- 2022-06-28 C#中Lambda表達式的三種寫法_C#教程
- 2024-02-27 credentials to a set of origins, list them explici
- 2024-04-08 nvm 在 Windows 上的使用
- 2022-09-18 C#面向對象編程中依賴反轉原則的示例詳解_C#教程
- 2022-08-29 .NET?Core自定義配置文件_實用技巧
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支