自定义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}, {
date: '2023/8/2', type: 'london', value: 6145}, {
date: '2023/8/2',
type: 'tokyo', value: 2016}, {
date: '2023/8/2', type: 'paris', value: 257}, {
date: '2023/8/3', type: 'london',
value: 508}, {
date: '2023/8/3', type: 'tokyo', value: 2916}, {
date: '2023/8/3', type: 'paris', value: 289}, {
date: '2023/8/4', type: 'london', value: 6268}, {
date: '2023/8/4', type: 'tokyo', value: 4512}, {
date: '2023/8/4',
type: 'paris', value: 428}, {
date: '2023/8/5', type: 'london', value: 6411}, {
date: '2023/8/5', type: 'tokyo',
value: 8281}, {
date: '2023/8/5', type: 'paris', value: 619}, {
date: '2023/8/6', type: 'london', value: 1890}, {
date: '2023/8/6', type: 'tokyo', value: 2008}, {
date: '2023/8/6', type: 'paris', value: 87}, {
date: '2023/8/7',
type: 'london', value: 4251}, {
date: '2023/8/7', type: 'tokyo', value: 1963}, {
date: '2023/8/7', type: 'paris',
value: 706}, {
date: '2023/8/8', type: 'london', value: 2978}, {
date: '2023/8/8', type: 'tokyo', value: 2367}, {
date: '2023/8/8', type: 'paris', value: 387}, {
date: '2023/8/9', type: 'london', value: 3880}, {
date: '2023/8/9',
type: 'tokyo', value: 2956}, {
date: '2023/8/9', type: 'paris', value: 488}, {
date: '2023/8/10', type: 'london',
value: 3606}, {
date: '2023/8/10', type: 'tokyo', value: 678}, {
date: '2023/8/10', type: 'paris', value: 507}, {
date: '2023/8/11', type: 'london', value: 4311}, {
date: '2023/8/11', type: 'tokyo', value: 3188}, {
date: '2023/8/11',
type: 'paris', value: 548}, {
date: '2023/8/12', type: 'london', value: 4116}, {
date: '2023/8/12', type: 'tokyo',
value: 3491}, {
date: '2023/8/12', type: 'paris', value: 456}, {
date: '2023/8/13', type: 'london', value: 6419}, {
date: '2023/8/13', type: 'tokyo', value: 2852}, {
date: '2023/8/13', type: 'paris', value: 689}, {
date: '2023/8/14',
type: 'london', value: 1643}, {
date: '2023/8/14', type: 'tokyo', value: 4788}, {
date: '2023/8/14', type: 'paris',
value: 280}, {
date: '2023/8/15', type: 'london', value: 445}, {
date: '2023/8/15', type: 'tokyo', value: 4319}, {
date: '2023/8/15', type: 'paris', value: 176}];
const chart = new G2.Chart({
container: 'chartcontainer',
autoFit: true,
height: 500,
padding: [100, 20, 30, 100] // 上右下左
});
chart.data(data);
chart.scale({
value: {
alias: '金额',
formatter: (value) => {
return value+' 万元'
},
sync: true,
nice: true,
}
})
chart.tooltip({
showCrosshairs: true,
shared: true,
});
chart.axis('date', {
// 坐标轴
label: {
textStyle: {
fill: '#000000'
}
}
});
chart.axis('value', {
label: {
textStyle: {
fill: '#aaaaaa'
},
formatter: function formatter(text) {
// 格式化参数值
return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '元'
}
}
});
// 自定义图例
chart.legend('type',{
clickable: true,
position: 'top', // 设置图例的显示位置
})
chart.line().position('date*value').color('type')
chart.point().position('date*value').color('type').shape('circle')
.style({
stroke: '#fff',
lineWidth: 1,
})
chart.render();
</script>
</body>
</html>
页面效果：
参考文档：
https://antv-g2.gitee.io/zh/docs/api/general/tooltip
https://www.yuque.com/antv/g2-docs/tutorial-tooltip
https://g2-v4.antv.vision/zh/docs/manual/tutorial/tooltip
https://www.bookstack.cn/read/g2-tutorial/12.md
https://www.mianshigee.com/tutorial/g2-2.x/1062ee51a03503dd.md
https://antv-g2.gitee.io/zh/docs/manual/concepts/component/tooltip