统计图表操作之G2

╰半橙微兮° 2022-06-08 06:08 208阅读 0赞

#### 前言：最近在做一个东西的时候，需要对于用户数据，以及其他相关的数据进行图表统计，所以自己在网上找了一下插件，发现了G2，这的确是一个好东西，功能强大，但是唯一不足的时候该插件太大了，有417k。对于一般的操作，还是代价太大了，不过既然接触到了这个插件，还是有必要总结一下。 ####

#### 插件官网地址 ####

http://antv.alipay.com/g2/doc

#### 简单的demo ####

我这里是把js文件下载下来了，所以是引入本地文件，你们也可以通过引入在线资源

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <style type="text/css"> #container{ width: 800px; margin: 100px auto; } </style>
        <script src="g2.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript"> // 定义数据源 var data = [ {time: "2013", amount: 120}, {time: "2014", amount: 240}, {time: "2015", amount: 300}, {time: "2016", amount: 180}, {time: "2017", amount: 150}, ]; // 创建图表对象 var chart = new G2.Chart({ id: "container", forceFit: true,//宽度自适应，也可以直接调整 height: 280, }); // 载入数据源 chart.source(data, { time: { alias: "时间" //定义别名 }, amount: { alias: "销售量" } }); // 绘制图像,这里time*amount也就是time是X轴,如果是amount*time,那么amount就是X轴 // 这里的interval是几何标记,也就是你可以通过设置几何标记从而确定你要展示的图标类型 chart.interval().position("time * amount").color("time"); //渲染图像到网页 chart.render(); </script>
    </body>
    </html>

#### 效果图 ####

![SouthEast][]

[SouthEast]: /images/20220608/f7b3a436d6e548c2a932590b944afd10.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery Flot统计图表插件

[下载地址][Link 1] Flot动画师是一个jQuery插件,将添加平滑或渐进的动画Flot图表,Flot动画师将允许您强调和关注一些图表和/或系列动画通过轻松地添加到

「爱情、让人受尽委屈。」/ 2022年09月14日 13:27/ 0 赞/ 211 阅读

相关 vue：ant-g2渲染图表时出现累增（追加）

问题： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR55qE6bqm_size_2

深藏阁楼爱情的钟/ 2022年09月10日 07:10/ 0 赞/ 239 阅读

相关什么是G2G?G2E?G2B?G2C?

![在这里插入图片描述][630f30fe4e7e4a0382a55dcaa8cb41de.png] ![在这里插入图片描述][watermark_type_ZmFuZ3p

╰+哭是因爲堅強的太久メ/ 2022年09月06日 10:16/ 0 赞/ 196 阅读

相关统计图标操作之Chart

前言：之前介绍了统计图标操作的G2，这一个插件个人认为功能相对不如G2插件强大，但是这一个插件的大小略微小一点为398k，大小还是不可忽视。另外这一个插件自己可以操作的空间相

女爷i/ 2022年06月08日 06:11/ 0 赞/ 155 阅读

相关统计图表操作之G2

前言：最近在做一个东西的时候，需要对于用户数据，以及其他相关的数据进行图表统计，所以自己在网上找了一下插件，发现了G2，这的确是一个好东西，功能强大，但是唯一不足的时候该插件

╰半橙微兮°/ 2022年06月08日 06:08/ 0 赞/ 209 阅读

相关统计图表

统计图表一. 为什么要使用统计图表 1，数据可视化，用于分析 2，用于方便领导进行决策统计二. 需要支持的东西必须得有数据【不能少】，数据需要分类

电玩女神/ 2022年03月15日 12:24/ 0 赞/ 307 阅读

相关 poi操作word，指定位置替换为jfreechart统计图表

转载：[https://www.cnblogs.com/zwdx/p/8403946.html][https_www.cnblogs.com_zwdx_p_8403946.ht

待我称王封你为后i/ 2022年01月26日 04:35/ 0 赞/ 520 阅读

相关 TexStudio（2）图表篇

B站视频 [https://www.bilibili.com/video/av13653846/?p=3][https_www.bilibili.com_video_av136

「爱情、让人受尽委屈。」/ 2021年11月16日 08:18/ 0 赞/ 521 阅读

相关 D3 vs G2 vs Echarts以及其他可视化图表

初次接触 web 图表开发的工程师，面对众多的可视化工具库难免会有疑惑，比如说：这库的产品定位？哪个更好学？哪个更强大？让我们带着问题，从这三个库的命名出发，比

绝地灬酷狼/ 2021年09月18日 23:40/ 0 赞/ 449 阅读

相关统计图表展示

一后端聚合数据 1 web层 @ApiOperation("显示统计数据") @GetMapping("show-chart/{begin}/{e

柔情只为你懂/ 2021年07月24日 22:15/ 0 赞/ 559 阅读