Antv/G2 折线图使用 DataSet 进行数据排序

最新推荐文章于 2024-05-27 09:52:37 发布

＊且听风吟

最新推荐文章于 2024-05-27 09:52:37 发布

阅读量589

点赞数

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

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

版权

本文介绍了如何在Antv/G2中利用DataSet对折线图的数据进行排序。首先，提供了DataSet的安装方法，包括浏览器直接引入和命令行安装。通过这些方法，可以方便地在项目中使用G2 3.2的DataSet功能，实现数据的处理和排序，从而创建出理想的页面展示效果。

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

DataSet 文档
 G2 3.2 DataSet 文档

安装

浏览器引入

可以通过 <script> 标签引入在线资源或者本地脚本：

<!-- 引入在线资源 -->
<script src="https://unpkg.com/@antv/data-set"></script>

<!-- 引入本地脚本 -->
<script src="./data-set.js"></script>

这样，在后续脚本中就可以得到全局变量 DataSet：

<script src="https://unpkg.com/@antv/data-set"></script>
<script>
  const dv = new DataSet.DataView();
</script>

命令行安装

npm install @antv/data-set --save

或者

 yarn add @antv/data-set --save

<!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