antv-g2学习手册-上_ant g2-程序员宅基地

技术标签: vue.js  

G2所构建出的图表是由一系列独立的图形元素组合而成的:

  1. 数据Data:可视化最基础的部分
  2. 图形属性Attribute:负责将数据中的变量映射到图形空间
  3. 几何标记Geometry:即在图表中实际看到的图形元素,如点,线,多边形等,每个几何标记对象含有多个图形属性,G2的核心就是建立数据中的一系列变量到图形属性的映射
  4. 度量Scale:数据空间到图形属性空间的转换桥梁,每一个图形属性都对应着一个或者多个度量
  5. 坐标系Coordinate:描述了数据是如何映射到图形所在的平面的,同一个几何标记在不同坐标系下会有不同的表现。
  6. 可视化组件Component:图标辅助元素,用于增强图标的可读性和可理解性
  7. 分面Facet:描述如何将数据分解为各个子集,以及如何对这些子集作图并联合进行展示,主要用于多维数据分析

View视图

View是拥有独立数据源,并且能够绘制多个图形的容器,里面会包含Geometry,组件,交互,事件等,而Chart是继承于View。

数据

G2支持的数据格式如下:

[
	{key:value},
	{key:value},
]

数据重载
当chart实例创建完毕之后,通过chart.data(data)装载数据

数据更新
G2更新数据的方式有两种

  1. 图表数据更新(前后数据结构不发生变化),更新后马上刷新图表
	chart.changeData(data)
  1. 仅需要更新数据,但不需要马上更新图表
	chart.data(newData);//更新
	chart.render();//更新图表

注:更新数据时还可以清除图表上的所有元素,重新定义图形语法,改变图表类型和各种配置

	chart().line().position(x*y);
	chart.render();
	chart.clear();//清理所有图形
	chart.data(newData);//加载新数据
	chart.interval().position(x*y).color("z");//重新定义图形语法
	chart.render();

图表组成

在这里插入图片描述

度量配置

度量(Scale)用于定义数据的类型和展示方式,主要用于:

  • 生成坐标轴刻度值
  • 显示图例项
  • 格式化数据展示文本
度量的定义

chart.scale(defs:object)同时设置多个度量

chart.scale(field:string,cfg:object)定义单个度量

注意:不同的度量类型有不同的配置项

获取度量的方法
  • chart.getScalesByDim(‘x’|‘y’)获取x,y轴对应的度量,注意:多轴图时y轴可能有多个度量对应
  • chart.getScaleByField(filed) 根据字段名获取度量

注:方法可以在Chart和View上使用,获取到度量后可以使用度量的属性和度量的方法

度量类型

G2按照数值是否连续对数据进行分类:

  1. 分类(非连续)数据,又分为有序分类和无序分类
  2. 连续数据,时间也是一种连续数据类型
  3. 常量度量,数据是一种常量,只有单个值

度量的类型:

  • 分类度量:
    • cat:分类度量
    • timeCat:时间分类度量
  • 连续度量
    • linear:线性度量
    • time:连续的时间度量
    • log:log度量
    • pow:pow度量
    • quantize:分段度量,用户可以指定不均匀的分段
    • quantile:等分度量,根据数据的分部自动计算分段
  • 常量度量
    • identity:常量度量

G2默认不需要进行度量的配置,因为代码内部已经根据数据的形式对度量进行了假设,计算过程如下:

  • 查看用户是否制定了对应字段的数据类型(type)
  • 如果没有,判断字段的第一条数据的字段类型
    • 如果数据中不存在对应的字段,则为‘identity’
    • 如果是数据则为‘linear’
    • 如果是字符串,判断是否是时间格式,如果是时间格式则为时间类型‘time’
    • 否则是分类类型‘cat’

可以手动更改度量的类型chart.scale('date',{type:'timeCat'})

度量的配置项

度量的通用配置项:

名称 类型 说明
type string 度量类型
values any[] 定义域
min any 定义域的最小值,在分类型度量中为序号
max any 定义域中的最大值
range [number,number] 值域的最小,最大值
tickCount number 期望的tick数量,非最终结果(作用域生成坐标轴的刻度数和图例上的图例项个数)
formatter func(value,index) 格式化函数,用于tooltip,tick等展示(坐标轴,图例和label的文本都会受到影响)
tickMethod string/func(scale) 计算ticks的方法
alias string 显示在坐标轴、图例上的标题

注:tickMethod用来计算ticks的方法,不用的度量类型可能有不同的计算方法

  • wilkinson-extended 数字ticks的计算方法,linear类型度量内置的计算方法
  • r-pretty 数字ticks的计算方法,ticks的nice效果很好,但是tickCount的精度太差
  • time 时间ticks的计算方法,计算出一个tickInterval,坐标刻度之间的间隔固定
  • time-pretty 时间ticks的计算方法,会对年,月进行优化,time类型度量内置的计算方法
  • log 计算数字的ticks方法,按照log的函数来计算,生成[0,10,100,1000]类似的ticks
  • pow 计算数字的ticks方法,按照pow的函数来计算,生成[0,4,9,16]类似的ticks
  • quantile:计算数字的ticks方法,根据统计学上的几分位概念计算ticks,表现的是数据的分布

也可以自己实现ticks的方法

所有连续度量都支持的配置项

nice:是否优化显示度量的刻度值,设置该值后会对min,max进行优化显示

度量的方法
  • scale(value) 将数据转换成0-1的值
  • invert(value) 将0-1转换成原始数据
  • getTicks() 获取生成的ticks
  • getText(value) 格式化文本

坐标系配置

坐标系,Coordinate,将对象的位置映射到图形平面上,描述了数据是如何映射到图形所在的平面。位置通常由两个坐标x和y决定。

注意:目前G2还不支持三维坐标系

坐标系类型

坐标系笼统分为笛卡尔坐标系和非笛卡尔坐标系两种,非笛卡尔坐标系即极坐标,由角度和半径这两个维度来确定位置

G2中可用的坐标系类型如下:

名字 描述 配置语法
cartesian/rect 笛卡尔坐标系,G2默认坐标系 chart.coordinate(‘rect’)或chart.coordinate(‘cartesian’)
polar 极坐标系 chart.coordinate(‘polar’)
helix 螺旋坐标系,基于阿基米德螺旋线 chart.coordiante(‘helix’)
theta 一种特殊的极坐标系,半径长度固定,仅仅将数据映射到角度,常用于饼图的绘制 chart.coordiante('theta’)或者chart.coordinate(‘polar’).transpose()
坐标系的变换
变换方法 描述 配合语法
rotate 旋转,默认按照坐标系中心旋转 chart.coordinate().rotate(-Math.PI*0.25)
scale 缩放,默认按照坐标系中心缩放 chart.coordinate(‘rect’).scale(0.7,1.2)
transpose x,y轴置换 chart.coordiante(‘rect’).transpose()
reflect 镜像,沿x轴方向或者沿y轴方向映射 chart.coordiante().reflect(‘x’);chart.coordiante().reflect(‘y’)

坐标轴配置

坐标轴和坐标作为图表的引导元素,可以将图形和原始值进行映射关联。在G2中,坐标轴是自动生成的,内容是由scale度量控制的,而渲染的细节则是由主题控制

坐标轴组成

在这里插入图片描述

坐标轴配置

chart.axis()用于坐标轴样式的配置

注意:坐标轴的内容是由scale度量控制的,chart.axis()只用于控制坐标轴的外观配置

title配置

G2的默认主题中,是关闭了title的展示的

//配置title样式
chart.axis('x',{
    
	title:{
    
		style:{
    fill:"#1890ff"}
	}
})

默认情况下,G2会为每条坐标轴生成标题,标题名默认为该轴对应数据字段的属性名。当需要为坐标轴设置别名时,则需要通过chart.scale()接口,为对应的scale度量设置alias别名属性来改变坐标轴标题

label配置

坐标轴文本的内容同样也受scale度量的控制,G2默认会生成所有的label内容,可以通过chart.scale()接口改变对应坐标轴label的显示

chart.scale('scale',{
    
	ticks:[0,20,40],
	foramtter:(val)=>{
    }
})
设置坐标轴数值范围

坐标轴的数值范围受数据的约束,同时也可以通过chart.scale()接口进行配置。

chart.scale('sales',{
    
	min:0,
	max:200
})
设置坐标轴刻度线个数

默认的坐标轴刻度线个数是5个,可以通过chart.scale(name:{tickCount:value})自定义坐标轴刻度线个数

设置坐标轴刻度线间距

对于连续类型的数据,G2支持设置坐标轴刻度线的间距(tickInterval)属性,通过chart.scale(name:{tickInterval:value})进行配置。

注意:tickInterval为原始数据值的差值,并且tickCount和tickInterval不可以同时声明

设置坐标系两端留白

对于分类数据的坐标轴两边默认会留下一定的留白,连续数据的坐标轴的两端则没有留白
两端的留白可以通过chart.scale(name:{range:[]})进行配置,分类数据的range的默认值是[1/(count-1),1-1/(count-1)],count代表数据的个数,可以修改这个值来改变留白的大小

Tooltip配置

提示消息Tooltip,是指当鼠标悬停在图形上时,以提示框的形式展示该点的值,数据单位等,帮助用户快速获取图形的关键数据

G2提供的Tooltip组件由以下部分组成:
在这里插入图片描述

  • crosshairs:tooltip辅助线,用于辅助定位数据在坐标系的位置
  • marker:突出当前数据点的位置
  • tooltip:展示数据信息的内容框
配置项详解

G2提供了三个层级的Tooltip开关配置

  1. Chart:控制整个图表的tooltip开关,当chart.tooltip(false)将tooltip关闭时,view及geometry上的tooltip配置均不生效,整个图表tooltip关闭
  2. View:控制当前View的tooltip开关,当view.tooltip(false)将tooltip关闭时,当前view tooltip将被关闭,其下所有Geometry几何标记的tooltip配置均不生效
  3. Geometry:控制当前的Geometry几何标记的tooltip开关,当geometry.tooltip(false)将tooltip关闭时,该Geometry的数据将不展示在tooltip内容框中

注:Chart/View上的tooltip()接口用于控制tooltip的显示样式配置,Geometry上的tooltip()接口用于tooltip显示内容的配置

内容配置

对于tooltip显示内容的定制,需要使用geometry.tooltip()接口,同时还可以通chart.tooltip({itemTpl:‘xxx’})配合使用

	chart.tooltip({
    
		showCrosshairs:true,//展示Tooltip辅助线
		shared:true,
		showTitle:false,
		itemTpl:"<li>{year}有{value}个</li>"
	})
Tooltip相关事件
//tooltip显示时触发
chart.on('tooltip:show',(ev)=>{
    
	const {
    tooltip,items,title,x,y}=ev;
	//x:当前鼠标的x坐标
	//y:当前鼠标的y坐标
	//tooltip:当前的tooltip对象
	//items:数组对象,当前tooltip显示的每条内容
	//title:tooltip标题
})
//tooltip内容变更时触发
chart.on('tooltip:change',(ev)=>{
    
	const {
    tooltip,items,title,x,y}=ev;//变量内容同上
})
//tooltip消失时触发
chart.on('tooltip:hide',(ev)=>{
    
	const {
    tooltip} =ev;
	//tooltip:当前的tooltip对象
})

图例配置

图例(legend)是图表的辅助元素,使用颜色,大小,形状区分不同的数据类型,用于图表中数据的筛选。G2会根据设置图形属性映射以及数据的类型自动生成不同的图例,当一个变量对应了多个图形属性,G2会对图例进行合并。

  • shape,color,size这三个图形属性如果判断接收的参数是数据源的字段时,会自动生成不同的图例
  • shape 属性,会根据不同的shape类型生成图例
  • color属性,会赋予不同的图例项不同的颜色来区分
  • size属性,在图例上显示图形的大小
图例类型

在G2中,根据数据的类型,提供了两种图例
在这里插入图片描述

图例组成

G2中图例分为连续图例和分类图例两种,由于两种图例的结构不同,所以配置项也存在差异
在这里插入图片描述
在这里插入图片描述
注意:图例同坐标轴一样,其内容也是由scale度量控制的,而渲染的细节,则是由主题控制。G2同样开放了chart.legend()接口供用户进行个性化配置

图例配置

通过chart.legend()接口对图例进行配置

  • 隐藏图例
	chart.legend(false);//隐藏全部图例
	chart.legend('x',false);//只隐藏x维度对应的图例
  • 更改图例位置
    G2为图例提供了12个显示位置,通过position属性进行配置
	chart.legend('x',{
		position:'bottom'
	};//更改x维度对应的图例的显示位置

antv-g2学习手册-中
antv-g2学习手册-下

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Master12138/article/details/106939157

智能推荐

中国MOOC_面向对象程序设计——Java语言_第3周 对象容器_1查找里程-程序员宅基地

文章浏览阅读251次。第3周编程题查看帮助返回第3周编程题。注意程序(包括注释)中不能出现汉字。依照学术诚信条款,我保证此作业是本人独立完成的。温馨提示:1.本次作业属于Online Judge题目,提交后由系统即时判分。2.学生可以在作业截止时间之前不限次数提交答案,系统将取其中的最高分作为最终成绩。..._慕课面向对象编程题 查找里程

源码管理 - perforce高级操作_perforce rollback-程序员宅基地

文章浏览阅读3.4k次。以下的操作基于P4V。 1 p4 refresh all 某些情况下某些修改不能实时地在p4v中跟新,此时可以使用p4v refresh all。 还可以在任意的item上右键中找到refresh相关的操作。例如本地目录下删除或增加文件,在p4v中不能的及时反映,这个时候可以在 workspace中的目录中右键中点击refresh相关选项。当然其他的changelist,client,depot_perforce rollback

fstream和ifstream详细用法_fstream与ifstream有什么细微的区别-程序员宅基地

文章浏览阅读1.4w次。ofstream和ifstream详细用法 ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的文件I/O,stream这个类有两个重要的运算符: 1、插入器( 2、析取器(>>) 从流中输入数据。比如说系统有一个默认的标准输入流(cin)_fstream与ifstream有什么细微的区别

javascript学习之利用定时器实现图片的自动切换和关闭功能_禁用切换图片怎么实现的-程序员宅基地

文章浏览阅读4k次,点赞3次,收藏15次。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;&lt;_禁用切换图片怎么实现的

Kaggle:Give me some credit(1)_kaggle项目"give me some credit"数据集下载-程序员宅基地

文章浏览阅读2k次。背景信用评分算法,对默认可能性进行猜测,这是银行用来判断贷款是否应该被授予的方法,完成一个评分卡,通过预测某人在未来两年将会经历财务危机的可能性来提高信用评分的效果,帮助贷款人做出最好的决策本项目主要为申请者评分模型的开发过程。数据集介绍数据来源:数据来自Kaggle,cs-training.csv是有15万条的样本数据,下图可以看到这份数据的大致情况。下载地址为:https://www...._kaggle项目"give me some credit"数据集下载

[转]OEM版XP SP3安装时提示“序列号无效”的解决方法-程序员宅基地

文章浏览阅读267次。[转]OEM版XP SP3安装时提示“序列号无效”的解决方法 微软终于在5月6日正式发布XP SP3补丁,是个包含SP3(这个sp3跟前段时间“泄露版”的是一样的)的ISO文件。 下载回来后把它集成到DELL的OEM XP SP2中,然后做安装测试,发现在安装过程中提示“序列号无效”。颇为惊奇,因为集成到VOL XP SP2..._xp需要序列号无法完成安装

随便推点

Linux(五)Linux-shell脚本中的循环,数组,函数等操作_# 在 [] 输入判断条件 if [ i > $max ] then let max=$i fi #-程序员宅基地

文章浏览阅读811次。目录1、if2、判断条件的写法3、for4、例如:获取1-100的奇数和偶数和5、数组:存储多个元素,数据类型可以不同,元素元素之间以空格切分6、read:键盘录入7、打印三角形8、函数9、获取当前日期时间10、格式化日期时间:11、加减日期时间12、重定向:执行命令的结果写写入到文件13、定时器:1、if 格式1: if 判断条件 then 判断为true执行的代码 ..._# 在 [] 输入判断条件 if [ i > $max ] then let max=$i fi # 在 [] 输入判断条件

下载编译Chrome详细步骤-程序员宅基地

文章浏览阅读113次。文章来源:http://blog.csdn.net/allendale/article/details/9262833参考:http://dev.chromium.org/developers/how-tos/build-instructions-windows 1 Chrome的代码量巨大,下载编译的过程一出错,可能就需要回头从来。工欲善其事,必先利其器,推荐电脑内存至少8..._gcc 编译 chrome

EPALN 安装板布局之出现‘延伸和扩展’对话框_eplan延伸和间隔-程序员宅基地

文章浏览阅读1k次。一边学习一边记录,初学者 EPLAN中绘制2D安装板布局图时,插入部件时总弹出“延伸和扩展的对话框”,意思就是询问你插入的这个设备/部件的安装数据(长宽高等)。出现这个对话框的原因是你的这个部件没有相应的安装数据(如图所示)。所以在新建部件时,将这个部件的安装数据填写完整即可。..._eplan延伸和间隔

vue使用wangEditor编辑器上传图片_vue wangeditor 自动上传-程序员宅基地

文章浏览阅读2.6k次。vue使用wangEditor上传图片_vue wangeditor 自动上传

html5 canvas实现雷达扫描动画特效_用于显示雷达扫描动画的leaflet插件-程序员宅基地

文章浏览阅读3.3k次,点赞8次,收藏26次。先看一下最终效果实现思路绘制4个圆 绘制一个十字线 绘制一个扫描的指针 让指针转起来雷达构造函数function Radar(){ this.renderArr=[];//待渲染对象存储数组 this.rotateAngle=0;//绘制的指针开始角度 this.speed=0.01* Math.PI;//绘制的指针偏移速度 this.point=null;//存储指针对象 } Radar.prototype.init=function(el_用于显示雷达扫描动画的leaflet插件

HBase的优势有哪些?-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏5次。概述HBase 是典型的 NoSQL 数据库,通常被描述成稀疏的、分布式的、持久化的,由行键、列键和时间戳进行索引的多维有序映射数据库,主要用来存储非结构化和半结构化的数据。因为 HBase 基于 Hadoop 的 HDFS 完成分布式存储,以及 MapReduce 完成分布式并行计算,所以它的一些特点与 Hadoop 相同,依靠横向扩展,通过不断增加性价比高的商业服务器来增加计算和存储能力。HBase 虽然基于 Bigtable 的开源实现,但它们之间还是有很多差别的,Bigtable 经常被描述成键_hbase的优势

推荐文章

热门文章

相关标签