统计图表操作之G2

最新推荐文章于 2024-04-27 10:02:05 发布
最新推荐文章于 2024-04-27 10:02:05 发布
阅读量6.6k 收藏 6
点赞数
分类专栏： 前端 文章标签： 插件 G2 图标插件
本文为博主原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/m0_37568521/article/details/78011326
版权
本文介绍了在项目中寻找并使用G2图表插件的经历。G2因其强大的功能而被选用，但体积较大（417k）。文章提供插件官网链接、简单DEMO及实际效果展示。
摘要由CSDN通过智能技术生成
前言：最近在做一个东西的时候，需要对于用户数据，以及其他相关的数据进行图表统计，所以自己在网上找了一下插件，发现了G2，这的确是一个好东西，功能强大，但是唯一不足的时候该插件太大了，有417k。对于一般的操作，还是代价太大了，不过既然接触到了这个插件，还是有必要总结一下。
插件官网地址
http://antv.alipay.com/g2/doc
简单的demo

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

<!DOCTYPE html>
<html lang=
最低0.47元/天 解锁文章
输出是最好的学习
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
G2 基本使用 折线图 柱状图 饼图 基本配置
weixin_33946020的博客
05-05 1万+
G2的基本使用 　　1.浏览器引入 <!-- 引入在线资源 --><script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script> 2.通过 npm 安装 npm install @antv/g2 --save 　　3.创...
G2：statistical用于统计图的高度交互式数据驱动的可视化语法
02-04
English | G2 统计图表的高度交互式数据驱动的可视化语法。 ••• G2是一种可视化语法，是一种具有高度可用性和可伸缩性的数据驱动可视语言。 它提供了一组语法，将用户从有限的一组图表中带到了几乎无限的图形形式。 使用G2，您可以仅用一条语句描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成基于Web的视图。 :television: 现场演示 :sparkles: 产品特点 :hundred_points: 稳定的图形语法：通过将数据映射到图形，可以绘制各种图表。 :star-struck: 交互的新语法：结合了触发器和动作机制的交互行为被用来探索数据。 :gorilla: 高级视图模块：具有开发定制的多维数据分析图形的能力。 :two_men_holding_hands: 双引擎渲染：能够自由切换Ca
G2 可视化引擎-统计图表
ejinxian的专栏
06-08 1664
G2 可视化引擎 G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表 ...
探索未来数据可视化：AntV G2-React 框架深度解析
最新发布
gitblog_00024的博客
04-27 449
探索未来数据可视化：AntV G2-React 框架深度解析 项目地址:https://gitcode.com/antvis/g2-react 项目简介 AntV G2-React 是阿里AntV团队推出的一个面向现代Web开发的数据可视化库，它结合了G2的图形语法和React的组件化思想，为开发者提供了一种高效、灵活且强大的方式来构建动态的数据可视化应用。 技术分析 图形语法（Grammar o...
AntV可视化图表G2-柱状图
weixin_43279985的博客
08-17 2753
antV可视化柱状图
G2 图表统计
m0_37711659的博客
10-10 2010
index.php $data1 = [     [         "label" =&gt; "Mon.",         "type" =&gt; "series1",         "value" =&gt; 2800,     ],     [         "label" =&gt; "Mon.",         &
G2:一个由纯 javascript 编写、强大的语义化图表生成工具
jxchallenger的专栏
02-28 5693
原名G2，现在更名AntV 阿里出了一套js库跟Highcharts类似，但还是有区别的highcharts在生成图片或PDF要发送请求到服务器上生成后返回。G2不需要，是不是very nice? G2(The Grammar Of Graphics) 是蚂蚁金服-体验技术部-数据图形组的开源项目，是一个由纯 javascript 编写、强大的语义化图表生成工具，它提供了一整套图形语法
Viser一个适合基于G2的数据工程师的工具包
08-10
G2是一个高度可定制的、声明式的、基于SVG的可视化库，能够处理各种复杂的统计图表。通过Viser，开发者可以直接利用G2的强大功能，同时享受到更友好的API和更好的封装。 3. **丰富的图表类型**：Viser支持多种图表...
JS图表大量JS图表大量
01-14
这些图表通常包括折线图、柱状图、饼图、散点图、热力图等多种类型，适用于各种应用场景，如数据分析、数据可视化报告、网站统计等。 本资源包含大量的JS图表实例和库，旨在提供丰富的参考资料和学习素材。以下是...
几款javascript js 生成 统计图 统计报表
12-06
G2Plot是阿里云AntV团队推出的基于G2的可视化图表库，它提供了多种常见的统计图表，并支持响应式布局，适用于Web和移动端。G2Plot的API设计简洁，易于上手，同时也提供了丰富的图表交互功能。 6. **React-Charts**...
js统计图
03-07
5. **G2Plot**：G2Plot是阿里云AntV团队推出的一个面向业务的可视化图表库，提供了丰富的统计图表，如条形图和饼图。G2Plot注重易用性，提供了多种预设的主题和模板，同时保持了高度的可定制性，适用于快速搭建数据...
Excel图表制作方法介绍.docx
09-26
Excel图表制作方法是数据分析和展示数据的关键技能，尤其对于教师来说，用于整理和展示学生成绩。以下是一些关键步骤和知识点： 1. **输入数据**：首先，你需要创建一个新的Excel工作表并输入列标题，例如“姓名”...
G2-------数据的处理(如设置横纵坐标，提示信息，时间间隔的处理，字段集展开，字段重命名等)
热门推荐
CHL博客
08-29 2万+
1 全局设置样式 this.chart2.source(this.data,{     value:{         min : 0   // 坐标轴的起始值         max :1   // 坐标轴的结束值        formatter: val =&gt; {    // 设置坐标轴和提示框的文字             return val + '%';        ...
g2基础柱状图
徐同保的专栏
10-23 4143
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,height=device-height"&gt
G2图表实现滚动
haishangfeie的博客
02-01 7462
使用G2实现图表，如果数据太多，挤在一起，会影响视觉效果，这时我们会希望图表可以滚动。本文通过柱状图实现滚动的方案，希望可以给你提供一点G2图表实现滚动的思路。
打印26个字母，在'a'上加偏移量
龟的小号的博客
10-28 1094
打印26个字母 方法：在’a’上加偏移量 package com.word.word; //打印26个字母 public class PrintLowerCase { public static void main(String[] args) { for(int i=0;i&lt;26;i++){ int c='a'+i; //'a'会自动转换...
解决AntV G2图表宽高自适应时第一次加载(初始化)宽度略宽问题
zhang1339435196的博客
10-22 3639
问题描述 AntV G2图表结合栅格系统，在第一次加载后图表比父盒子略宽（ant design of vue）,但刷新后或改变窗口宽度后恢复正常。 解决 在mounted函数里图表初始化后加上如下代码: mounted () { this.loadingAllChart() // 下面代码解决第一次渲染，图标宽度过款问题 const e = document.createEvent('Event') e.initEvent('resize', true, true)
echarts图形销毁重新绘制
weixin_38170829的博客
08-09 2884
echars在绘制图形的时候会给div添加属性_echarts_instance_，因此只需要将此属性移除并清空div内容即可重新绘制新的echarts图形。 $("#myChart").removeAttr("_echarts_instance_").empty(); 转载于:https://www.cnblogs.com/ljy0905/p/11326277.html...
G2Plot图表库应用
qq_48108860的博客
03-19 1630
在html中使用G2Plot 1、引入G2Plot图表组件库 <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script> 2、创建图表容器 <div id="container"></div> 3、创建图表 <script> 3-1创建图表的构造函数 le...
ANTV G2 3.2 图表使用全面指南
ANTV G2 是一个强大的数据可视化库，主要用于创建各种统计图表。该教程详细介绍了如何利用 G2 的功能来构建交互式图表。以下是 G2 的核心概念和关键知识点： 1. **G2图表组成**： G2 的图表构建基于图形语法，它由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值