技术标签: vue.js
G2所构建出的图表是由一系列独立的图形元素组合而成的:
View是拥有独立数据源,并且能够绘制多个图形的容器,里面会包含Geometry,组件,交互,事件等,而Chart是继承于View。
G2支持的数据格式如下:
[
{key:value},
{key:value},
]
数据重载
当chart实例创建完毕之后,通过chart.data(data)
装载数据
数据更新
G2更新数据的方式有两种
chart.changeData(data)
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和View上使用,获取到度量后可以使用度量的属性和度量的方法
G2按照数值是否连续对数据进行分类:
度量的类型:
G2默认不需要进行度量的配置,因为代码内部已经根据数据的形式对度量进行了假设,计算过程如下:
可以手动更改度量的类型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的方法,不用的度量类型可能有不同的计算方法
也可以自己实现ticks的方法
所有连续度量都支持的配置项
nice:是否优化显示度量的刻度值,设置该值后会对min,max进行优化显示
坐标系,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()只用于控制坐标轴的外观配置
G2的默认主题中,是关闭了title的展示的
//配置title样式
chart.axis('x',{
title:{
style:{
fill:"#1890ff"}
}
})
默认情况下,G2会为每条坐标轴生成标题,标题名默认为该轴对应数据字段的属性名。当需要为坐标轴设置别名时,则需要通过chart.scale()接口,为对应的scale度量设置alias别名属性来改变坐标轴标题
坐标轴文本的内容同样也受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,是指当鼠标悬停在图形上时,以提示框的形式展示该点的值,数据单位等,帮助用户快速获取图形的关键数据
G2提供的Tooltip组件由以下部分组成:
G2提供了三个层级的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显示时触发
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会对图例进行合并。
在G2中,根据数据的类型,提供了两种图例
G2中图例分为连续图例和分类图例两种,由于两种图例的结构不同,所以配置项也存在差异
注意:图例同坐标轴一样,其内容也是由scale度量控制的,而渲染的细节,则是由主题控制。G2同样开放了chart.legend()接口供用户进行个性化配置
通过chart.legend()接口对图例进行配置
chart.legend(false);//隐藏全部图例
chart.legend('x',false);//只隐藏x维度对应的图例
chart.legend('x',{
position:'bottom'
};//更改x维度对应的图例的显示位置
文章浏览阅读251次。第3周编程题查看帮助返回第3周编程题。注意程序(包括注释)中不能出现汉字。依照学术诚信条款,我保证此作业是本人独立完成的。温馨提示:1.本次作业属于Online Judge题目,提交后由系统即时判分。2.学生可以在作业截止时间之前不限次数提交答案,系统将取其中的最高分作为最终成绩。..._慕课面向对象编程题 查找里程
文章浏览阅读3.4k次。以下的操作基于P4V。 1 p4 refresh all 某些情况下某些修改不能实时地在p4v中跟新,此时可以使用p4v refresh all。 还可以在任意的item上右键中找到refresh相关的操作。例如本地目录下删除或增加文件,在p4v中不能的及时反映,这个时候可以在 workspace中的目录中右键中点击refresh相关选项。当然其他的changelist,client,depot_perforce rollback
文章浏览阅读1.4w次。ofstream和ifstream详细用法 ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的文件I/O,stream这个类有两个重要的运算符: 1、插入器( 2、析取器(>>) 从流中输入数据。比如说系统有一个默认的标准输入流(cin)_fstream与ifstream有什么细微的区别
文章浏览阅读4k次,点赞3次,收藏15次。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><_禁用切换图片怎么实现的
文章浏览阅读2k次。背景信用评分算法,对默认可能性进行猜测,这是银行用来判断贷款是否应该被授予的方法,完成一个评分卡,通过预测某人在未来两年将会经历财务危机的可能性来提高信用评分的效果,帮助贷款人做出最好的决策本项目主要为申请者评分模型的开发过程。数据集介绍数据来源:数据来自Kaggle,cs-training.csv是有15万条的样本数据,下图可以看到这份数据的大致情况。下载地址为:https://www...._kaggle项目"give me some credit"数据集下载
文章浏览阅读267次。[转]OEM版XP SP3安装时提示“序列号无效”的解决方法 微软终于在5月6日正式发布XP SP3补丁,是个包含SP3(这个sp3跟前段时间“泄露版”的是一样的)的ISO文件。 下载回来后把它集成到DELL的OEM XP SP2中,然后做安装测试,发现在安装过程中提示“序列号无效”。颇为惊奇,因为集成到VOL XP SP2..._xp需要序列号无法完成安装
文章浏览阅读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 # 在 [] 输入判断条件
文章浏览阅读113次。文章来源:http://blog.csdn.net/allendale/article/details/9262833参考:http://dev.chromium.org/developers/how-tos/build-instructions-windows 1 Chrome的代码量巨大,下载编译的过程一出错,可能就需要回头从来。工欲善其事,必先利其器,推荐电脑内存至少8..._gcc 编译 chrome
文章浏览阅读1k次。一边学习一边记录,初学者 EPLAN中绘制2D安装板布局图时,插入部件时总弹出“延伸和扩展的对话框”,意思就是询问你插入的这个设备/部件的安装数据(长宽高等)。出现这个对话框的原因是你的这个部件没有相应的安装数据(如图所示)。所以在新建部件时,将这个部件的安装数据填写完整即可。..._eplan延伸和间隔
文章浏览阅读2.6k次。vue使用wangEditor上传图片_vue wangeditor 自动上传
文章浏览阅读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插件
文章浏览阅读2k次,点赞2次,收藏5次。概述HBase 是典型的 NoSQL 数据库,通常被描述成稀疏的、分布式的、持久化的,由行键、列键和时间戳进行索引的多维有序映射数据库,主要用来存储非结构化和半结构化的数据。因为 HBase 基于 Hadoop 的 HDFS 完成分布式存储,以及 MapReduce 完成分布式并行计算,所以它的一些特点与 Hadoop 相同,依靠横向扩展,通过不断增加性价比高的商业服务器来增加计算和存储能力。HBase 虽然基于 Bigtable 的开源实现,但它们之间还是有很多差别的,Bigtable 经常被描述成键_hbase的优势