简介 为了更好的使用G2进行数据可视化,我们需要先了解G2图表的组成及其相关概念. 完整的G2图表组成如下图所示:可以看出图表主要由axes(坐标轴axis的复数),tooltip(提示信息),guide(辅助元素),legend(图例),geom(几何标记  即用何种图形来展示数据,此处为点图)组成的,理解了基本组成,接下来看一下代码的编写. const chart = new G2.Chart({ width: 1000, height: 500, data: data, padding:…

在做数据可视化的过程中,遇到了一个问题,就是给图表tooltip重命名. 在研究后,发现了三种方法: 方法1:一般情况下,可以在给chart绑定数据源时,添加scale配置,并在scale配置中设置别名,直接在官网的实例代码中进行修改演示: 代码如下: const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value:…

Step1:引进G2脚本 方法一:引入在线脚本 <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script> 方法二:引入本地脚本 <script src="./g2.js"></script> //src为本地G2脚本所在相对路径 方法三:通过npm安装 npm install @antv/g2 --…

工作中需要制作一个看板,选型选用antV G2进行开发. 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用. 1.安装antv/g2 npm install @antv/g2 --save 2.创建一个Vue文件,引入antV/g2 import G2 from '@antv/g2'; 3.创建一个函数,函数内部创建一个Chart对象,并在挂载时调用(这里我创建了两个函数,创建Chart对象所需的参数定义在data(){}中,后面会说) test:function () { co…

工作中需要在基础柱状图的基础上添加一个自定义高度的背景颜色, 基础柱状图: 目标柱状图: 由于chart绘图可以重叠,通过该特性,我们可以在画两次图重叠在一起,第一次绘图描述背景,第二次绘图描述数据,代码如下 修改前的源代码如下: const data = [ { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, { name: 'London', 月份: 'Mar.',…

如今"鄙视链"体现在生活的方方面面,各行各业都有默认一致的鄙视链.IT圈子因为开发语言多样.工程师岗位种类多.技术框架多,也有自己圈子内的鄙视链.按照开发工程师的岗位形成的鄙视链是: 架构师>后端研发>前端研发>产品经理>运营>UI设计师 架构师认为:没有我,哪有他们,架构是一切的根基 后端开发认为:前端只会"画图" 前端开发认为:产品经理"嘴上功夫" 产品经理认为:我的产品已经很厉害了,还需要用力运营吗? 运营师认…

最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性.公司目前统一使用的是ECharts图表库,下文将对3种图表库进行分析比对. 相关文档 Vuejs2.X组件化-阿里的G2图表组件 手拉手,用Vue开发动态刷新Echarts组件 BizCharts 文档地址:BizCharts 一.安装 通过 npm/yarn 引入 npm install bizc…

一.echarts的折线图的使用demo如下,linecharts为实例化的封装组件,line为实际应用的组件 cnpm install echarts import React from 'react'; import './lineCharts.less'; let echarts = require('echarts'); /** * 组件参数配置 * * @param {string} id * id = 每个图标的标识 * @param {array} color * color =…

新公司已经呆了一个多月,目前着手一个数据可视化的项目,数据可视化肯定要用到图形库如D3.Highcharts.ECharts.Chart等,经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库. 官方地址:https://antv.alipay.com/g2/doc/index.html Github:https://github.com/antvis 2016年发布的开源库,时间虽短但库功能齐全,唯一不足的是社区太少,对于我这类菜鸟来说是件非常难过的事情,没办法硬着头皮终于找到思路--项目完…

G2 绘制混合图例 demo import G2 from '@antv/g2'; import DataSet from '@antv/data-set'; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象. const data = [ { label: '0.1', 放款应还本金: 2800, 价格: 2800, 收益: 2260, 总收益率: 2 }, { label: '0.2', 放款应还本金: 1800, 价格: 1800, 收益:…

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.创建 div 图表容器 <div id="c1"></div> 4. 编写图…

前言 随着可视化进入深水区,G2面临了越来越多交互上的需求.动画是提升交互必不可少的一部分,也是之前G2的薄弱环节.这个版本里我们开发并替换了动画底层,统一了时间轴,使G2的动画性能大大提升,并提供了一套默认的交互动画,使G2图表的表现力更加丰富. 默认动画 render() 出场动画 changeData() 数据变更动画 filter() 过滤动画 coord() 坐标系变换动画 自定义动画 通过Animate 接口 默认动画会同时出现.这样会引起视觉上的混乱. 我们可以通过自定义动画接口,…

2017 年开源中国社区新增开源项目排行榜 TOP 100 新鲜出炉! 这份榜单根据 2017 年开源中国社区新收录的开源项目的关注度和活跃度整理而来,这份最受关注的 100 款开源项目榜单在一定程度上预示着业界的最新流行趋势. 可以看到,前十名中有九个是国内开发者开发的开源项目,这个比例相比于去年已大大提高. 此外,榜单中的项目已经过筛选,均符合国际 OSI 批准的开源协议. 值得注意的是,今年关于人工智能的项目明显增加了不少,无论是 PHP.JavaScript 还是其他语言都诞生了相关的人…

转发自segmentfault  https://segmentfault.com/a/1190000017346799 前端 1.数据驱动的高交互可视化图形语法 AntV - G2 G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表. 同时,G2 也是 AntV 最重要的组成,始于<The Grammar of Graphics>一书描述的视觉编码语法系统(这也是 G2 项目命名的由来).…

Jeecg-Boot 1.1 版本发布,初成长稳定版本 导读     平台首页UI升级,精美的首页支持多模式 提供4套代码生成器模板(支持单表.一对多) 集成Excel简易工具类,支持单表.一对多导入导出 代码生成器,生成代码自带Excel导入导出,表单提供弹出风格和抽屉表单选择 系统权限大升级,支持按钮权限,数据权限(可控制不同人看不同数据) 数据日志记录功能,可记录数据变更日志,对比版本功能 查询过滤器开发完成,根据页面配置自动生成查询条件,支持多种匹配规则 Online在线报表配置功能完成…

 Jeecg-Boot 一款基于代码生成器的J2EE快速开发框架! 采用前后端分离技术: SpringBoot,Mybatis-plus,Shiro,JWT,Vue & Ant Design.提供强大的代码生成器, 前端页面代码和后端代码一键生成!JeecgBoot的宗旨是降低前后端分离的开发成本,提高UI能力的同时,提高开发效率,追求更高的能力,No代码概念,一系列智能化在线开发. JAVA编程有很多重复机械代码,生成器可以帮助解决50%的重复工作,让开发更多关注业务逻辑,从而实现代码生成+手…

一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com/w3cnote... Nuxt.js:https://zh.nuxtjs.org/ 桌面应用Electron:https://electronjs.org/ 2.React.js 官网:https://react.docschina.org/ 中文网:http://react-china.org/…

作者:HelloGitHub-小鱼干 JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开发模式:Online Coding 模式-> 代码生成器模式-> 手工 MERGE 智能开发,帮助解决 Java 项目 70% 的重复工作,让开发更多关注业务逻辑. 它引入了 No Coding 概念:在线表单配置(表单设计器).移动配置能力.工作流配置(在线设计流程).报表配置能力.在线图表配置.插件能力(可插拔)- 技术架构 开发环境 语言:Java 8 I…

目录 1. gojs 简介 2. gojs 应用场景 3. 为什么选用 gojs: 4. gojs 上手指南 5. 小技巧(非常实用哦) 6. 实践:实现节点分组关系可视化交互图 最后 本文是关于如何使用可视化库 gojs 的介绍及使用时的小技巧. 1. gojs 简介 gojs 是一个用于构建交互式可视化图的 js 库,使用可自定义的模板和布局构建复杂节点.链接和组,从而构建出简单到复杂的各类图,如流程图.脑图.组织图.甘特图等.而且提供了许多用于用户交互的高级功能,例如拖放.复制和粘贴.就地…

最近产品经理发现antV的图表非常漂亮,想在项目里使用,看了下文档antV适用于Vue的分支叫Viser,Viser的官方文档写的有点随意,在此给出Vue中使用Viser的方法如下: 1.安装Viser相关包 npm install viser-vue npm install @antv/data-set 2.在项目的main.js中引入Viser import Viser from 'viser-vue' Vue.use(Viser) 与引入ElementUI等框架相同,这里不需要额外引入CS…

之前的博文提到过,XNginx - nginx 集群可视化管理工具, 开发完成后一直稳定运行,直到前面因为一个站点的proxy站点配置问题,导致需要修改nginx 配置文件模板,因此借此机会对系统做了升级. 前端升级到最新版的ng-alain 事实证明,升级是痛苦的,前端项目真是一言难尽,能不动最好不动! 主要的变更是: - 之前的simple-table变成了st - desc也没了,成了sv, - page-header等的action也需要显示的指定 查查文档,前后花了一个多小时,前端的升…

1.样式 classnames:https://github.com/JedWatson/classnames 2.随机数 uuid:https://github.com/kelektiv/node-uuid#readme shortid:https://github.com/dylang/shortid path-to-regexp:url字符串的正则表达式. 3.事件 postal:https://github.com/postaljs/postal.js events:https://gi…

1.Module build failed: ReferenceError: Unknown plugin "import" specified in "base" at 0, attempted to resolve relative to "projectFolder/src" at Array.map (native) @ multi main 尝试安装插件: ubuntu: npm install babel-plugin-import…

map & scale TW bug https://antv.alipay.com/zh-cn/g2/3.x/demo/map/drill-down.html import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'dva'; import G2 from '…

微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. G2Plot项目应用 上一篇<提测平台19-Echarts图表在项目的实践>讲解了Echarts的图表应用,此篇来看下开箱即用且数据绑定更容易的G2Plot组件库如何使用,先上图看下已经实现的分组柱状图效果. 周需求数据 对应数据接口逻辑SQL语句没有变只是查询结果改成直接返回,也就是说没有像为了Echarts使用的格式化经过逻辑的处理,接口实现直接拷贝一份修改下名字,删除格式化部分就得到本篇需要的分组表查询直出数据. # apis…

柱状图横向滚动 思路 通过 Interaction 实现平移,通过 ScrollBar 显示滚动条 1.Interaction F2 提供一套交互机制,以达到通用交互行为的封装和复用.基于此机制,我们提供了以下五种通用的交互行为: 饼图选中 柱状图选中 图表平移 pan 图表缩放 图表 swipe 快扫 2.ScrollBar Scroll bar 是一个静态插件,主要用于辅助 pan 和 pinch 交互. 滚动条只是为 pan 服务的. 数据结构 数据结构: [ { provinceShor…

官方组件版 https://github.com/antvis/wx-f2/tree/custom-components 官方npm版 https://github.com/antvis/wx-f2 mpvue中使用 https://www.jianshu.com/p/f2cdca74964b .…

G2有一个高大上的名字叫做:The Grammar Of Graphics——图形语法.它是一个强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由定制图表,是为大数据时代而准备的强大可视化工具. 官方地址:(https://g2.alipay.com/) 试用G2 G2和传统的图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析的语义化数据可视化系统.它真正做到了让数据…

今天蚂蚁金服发布了一套数据可视化规范AntV. AntV 是一套专业的数据可视化规范,这套规范的目的是为了让可视化的使用者更懂数据可视化.这套规范是蚂蚁金服在可视化建设过程中的理论沉淀,它可以很好得指引产品经理,设计师和工程师怎样正确得使用可视化及可视化技术,规避常见的错误,可以当学习材料,也可以作为手册使用. 30 多种可视化图表的详细介绍 规范中总结了常用的 30 多种图表的特性(不断增加).每篇图表介绍中包括:基本介绍,图表起源,图表的构成,图表的应用场景,错误的使用场景,该图表的扩展及该…

小蚂蚁说: 2018 年 AntV 品牌日以知新.知心为主题,旨在让产品一直「知新」,与用户一直「知心」.AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数据可视化最佳实践.在过去一年,有 46 位开发者为AntV 贡献代码. 本文小蚂蚁将为大家简单介绍 AntV 的进化成果,了解详情记得点击下方链接哦~ AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含「数据驱动的高交互可视化图形语法」G2.专注解决流程与关系分析的图表库 G6.适于对性能.体…