统计图表操作之G2

╰半橙微兮° 2022-06-08 06:08 240阅读 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 条评论，240人围观）

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

相关阅读

相关 echarts统计图表

1、简介 ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地

雨点打透心脏的1/2处/ 2024年04月06日 11:13/ 0 赞/ 126 阅读

相关 Android统计图表之柱状图（条形图）

Android统计图表之柱状图（条形图）柱状图是统计图表中经常用到的一种图表，比如降雨量之类的统计展示。我之前写了一些关于Android上的统计图表库MPAndro

桃扇骨/ 2023年10月16日 22:07/ 0 赞/ 33 阅读

相关 Android统计图表MPAndroidChart

Android统计图表MPAndroidChart MPAndroidChart是在Android平台上开源的第三方统计图表库，可以绘制样式复杂、丰富的各种统计图表，

梦里梦外;/ 2023年10月16日 22:05/ 0 赞/ 37 阅读

相关 G2 可视化引擎-统计图表

[G2 可视化引擎][G2] G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一

雨点打透心脏的1/2处/ 2023年02月16日 06:27/ 0 赞/ 34 阅读

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

问题： ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR55qE6bqm_size_2

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

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

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

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

相关统计图表操作之G2

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

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

相关统计图表

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

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

相关 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 赞/ 547 阅读

相关统计图表展示

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

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