Antv/G2 多折线图双坐标轴

最新推荐文章于 2024-07-15 08:31:02 发布

＊且听风吟

最新推荐文章于 2024-07-15 08:31:02 发布

阅读量845

点赞数

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

本文链接：https://blog.csdn.net/hh18700418030/article/details/134136120

版权

本文介绍了如何使用Antv G2库创建一个多折线图，并结合双坐标轴展示复杂数据关系。通过示例代码和实际页面效果，展示了G2在数据可视化中的强大功能。

摘要由CSDN通过智能技术生成

<!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>	
	<style>
		#chartcontainer {
     
			margin: 50px auto;
			text-align: center;
		}
	</style>
</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/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>

	<script>
		var data = 
		[
		{
     date: '2023/8/1', type: 'london', value