Antv/G2 折线图 DataSet 数据处理过滤指定字段

＊且听风吟

于 2023-12-14 08:45:00 发布

阅读量1.2k

点赞数 21

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

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

版权

本文介绍了如何使用 Antv/G2 的 DataSet 处理数据，特别是针对折线图进行特定字段的过滤操作。通过示例代码展示了数据处理的过程，并给出了处理后数据的展示以及图表页面的实际效果。

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

DataSet 文档
 G2 3.2 DataSet 文档

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>多折线图dataset过滤数据</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>

 <script>
    var data = [
    {
     date: '2023/8/1', type: 'london', value: 4623, lrate: 0.33, trate: 0.65}, 
    {
     date: