Antv/G2 自定义tooltip鼠标悬浮提示信息

＊且听风吟

已于 2023-11-15 09:12:27 修改

阅读量709

点赞数

分类专栏： # html 文章标签： html

于 2023-11-06 18:15:00 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/134123686

版权

自定义tooltip鼠标悬浮提示信息：

chart.scale({
         
          value: {
   
            alias: '金额',
            formatter: (value) => {
   
              return value+' 万元'
            },
            sync: true,  
            nice: true,
          }
    })

demo 完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>多折线图</title>
</head>
<body>
	<div id="chartcontainer"></div>
	<script>
		/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
		.clientHeight
	</script>
	<script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>
    <!-- 浏览器引入，请使用全局命名空间 G2，如 new Chart() 改为 new G2.Chart，即可运行。 -->
<script>
    const data = [{
     date: '2023/8/1', type: 'london', value: 4623}, {
     date: '2023/8/1', type: 'tokyo', value: 2208}, {
     
        date: '2023/8/1', type: 'paris', value: 182}, {