安下载图形图像

分类分类

G2(可视化引擎)

G2(可视化引擎)

v5.0.12

大小:29.22 MB 更新:2023/06/21

类别:图像其它系统:WinXP, Win7, Win8, Win10, WinAll

立即下载

  G2可视化引擎提供图表设计功能,可以通过这款软件帮助用户设计新的图表,可以处理图表数据,可以设置数据交互方式,可以编辑处理数据流程,可以将复杂的数据可视化,对于需要处理数据和统计数据的朋友很实用,您可以借助这款图形语法设计具有图表功能的程序,提供坐标轴、图例、提示信息、文本标签配置、图形标注、滑块、滚动条、几何图形、图形元素、View视图、交互语法等多种编辑功能,为用户设计各种行业需求的数据统计图表,结合DataSet工具就可以管理数据,可以通过DataSet导入数据到图表分析!

G2(可视化引擎)

相关介绍

  G2 一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

软件功能

  完善的图形语法:数据到图形的映射,能够绘制出所有的图表。

  全新的交互语法:通过触发和反馈机制可以组合出各种交互行为,对数据进行探索。

  强大的 View 模块:可支持开发个性化的数据多维分析图形。

  双引擎渲染:Canvas 或 SVG 任意切换。

  可视化组件体系:面向交互、体验优雅。

  全面拥抱 TypeScript:提供完整的类型定义文件。

软件特色

  千变万化,自由组合

  任何图表,都可以基于图形语法灵活绘制,满足你无限的创意

G2(可视化引擎)

  专业完备

  大量产品实践之上,提供绘图引擎、完备图形语法、专业设计规范

G2(可视化引擎)

  生动,可交互

  强大的交互语法,助力可视分析,让图表栩栩如生

G2(可视化引擎)

新版功能

  1、全面拥抱 TypeScript。

  2、全新的可视化组件:面向交互,体验优雅。

  3、强大的 View 模块:可单独使用,具备完备的可视化组件、事件,支持 View 嵌套以及自动布局。

  4、全新的交互语法。

  5、绘图引擎升级至 G 0.4 版本,支持双引擎切换。

  6、引入数据更新机制。

  7、动画机制改造,更细粒度,体验更好。

  8、模块化管理,提供更加灵活的扩展机制。

官方教程

  通过 npm 安装

  npm install @antv/g2 --save

  成功安装完成之后,即可使用 import 或 require 进行引用。

G2(可视化引擎)

  浏览器引入

  既可以通过将脚本下载到本地也可以直接引入在线资源:

G2(可视化引擎)

  开始使用

  在 G2 引入页面后,我们就已经做好了创建第一个图表的准备了。

  下面是以一个基础的柱状图为例开始我们的第一个图表创建。

  1. 创建 div 图表容器

  在绘图前我们需要为 G2 准备一个 DOM 容器:

G2(可视化引擎)

  2. 编写图表绘制代码

  创建 div 容器后,我们就可以进行简单的图表绘制:

  1、new Chart() 创建 Chart 图表对象,指定图表所在的容器 id、图表的宽高、边距等信息;

  2、chart.data() 载入图表数据源;

  3、使用图形语法进行图表的绘制;

  4、chart.render() 渲染图表。

软件优势

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

  数据 Data:可视化最基础的部分。

  图形属性 Attribute:负责将数据中的变量映射至图形空间。

  几何标记 Geometry:即你在图表中实际看到的图形元素,如点、线、多边形等,每个几何标记对象含有多个图形属性,G2 的核心就是建立数据中的一系列变量到图形属性的映射。

  度量 Scale:数据空间到图形属性空间的转换桥梁,每一个图形属性都对应着一个或者多个度量。

  坐标系 Coordinate:描述了数据是如何映射到图形所在的平面的,同一个几何标记在不同坐标系下会有不同的表现。G2 提供了多种坐标系的支持:笛卡尔坐标、极坐标以及螺旋坐标等。

  可视化组件 Component:也可以成为图表辅助元素,用于增强图表的可读性和可理解性,在 G2 中,提供了丰富的可视化组件,包括坐标轴 Axis,图例 Legend,提示信息 Tooltip,图形标记 Annotation,滑动条 Slider 等。

  分面 Facet:描述了如何将数据分解为各个子集,以及如何对这些子集作图并联合进行展示,主要用于多维数据分析。

图形组件

  常见的 G2 图表包含的组件如下图所示:

G2(可视化引擎)

  几何图形 Geometry

  几何图形(Geometry),即我们所说的点、线、面这些几何图形,在 G2 中几何标记的类型决定了生成图表的类型,也就是数据被可视化后的实际表现,不同的几何标记都包含对应的图形属性 Attribute。

  坐标轴 Axis

  每个图表通常包含两个坐标轴,在直角坐标系(笛卡尔坐标系)下,分别为 x 轴和 y 轴,在极坐标轴下,则分别由角度和半径 2 个维度构成。

  每个坐标轴由坐标轴线(line)、刻度线(tickLine)、刻度文本(label)、标题(title)以及网格线(grid)组成。

  图例 Legend

  图例作为图表的辅助元素,用于标定不同的数据类型以及数据的范围,辅助阅读图表,帮助用户在图表中进行数据的筛选过滤。

  提示信息 Tooltip

  当鼠标悬停在某个点上时,会以提示框的形式显示当前点对应的数据的信息,比如该点的值,数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

  辅助标记 Annotation

  当需要在图表上绘制一些辅助线、辅助框或者图片时,比如增加平均值线、最高值线或者标示明显的范围区域时,可以使用辅助标记 annotation。

  缩略轴 Slider

  当图表中数据量比较多,用户希望关注数据集中在某个特殊区域的时候,可以使用缩略轴组件。缩略轴较适用于折线图。

  滚动条 Scrollbar

  当图表中数据量比较多多,也可以适用滚动条组件来一次只浏览一部分数据。滚动条组件提供水平滚动条、和垂直滚动条。滚动条组件较适用于柱形图和条形图。

坐标轴

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

  坐标轴组成

  下图表示了 G2 坐标轴的组成部分:

G2(可视化引擎)

  坐标系控制着坐标轴和网格线的绘制,不同的坐标系下坐标轴的表现不同,下图展示了两种不同坐标系的坐标轴和网格线:

G2(可视化引擎)

  坐标轴配置

  G2 提供了坐标轴的配置接口,主要用于坐标轴样式的配置:

  chart.axis();

  关于该接口的详细使用,可以阅读相关的 API 文档,下面主要向大家介绍关于坐标轴内容的配置方法。

  title 配置

  在本篇开头提到过,坐标轴的内容是由 scale 度量控制的,所以 scale 度量的名字控制着坐标轴的标题内容。 chart.axis() 只用于控制坐标轴的外观配置,在 G2 默认主题中,我们关闭了 title 的展示。

G2(可视化引擎)

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

G2(可视化引擎)
G2(可视化引擎)

  label 配置

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

G2(可视化引擎)
G2(可视化引擎)

  当需要对数值进行格式化时,也可以通过 chart.scale() 接口:

G2(可视化引擎)
G2(可视化引擎)

  chart.axis() 接口中的 label 属性则用于 label 的样式主题配置。

  设置坐标轴数值范围

  坐标轴的数值范围受数据的约束,同时也可以通过 chart.scale() 接口进行配置,每一种坐标轴数值范围的选择都会导致最后可视化结果的不同:

G2(可视化引擎)

  设置坐标轴刻度线个数

  默认的坐标轴刻度线个数是 5 个,同样可以通过 chart.scale(),用户可以自定义坐标轴刻度线的个数。

G2(可视化引擎)

  设置坐标轴刻度线间距

  对于连续类型的数据,G2 还支持设置坐标轴刻度线的间距(tickInterval 属性),同样需要在 chart.scale() 中进行配置,但是需要说明的是,tickInterval 为原始数据值的差值,并且 tickCount 和 tickInterval 不可以同时声明。

G2(可视化引擎)

  设置坐标系两端留白

  对于分类数据的坐标轴两边默认会留下一定的留白,连续数据的坐标轴的两端则没有留白。

G2(可视化引擎)

  两端的留白可通过 chart.scale() 接口中的 range 属性进行配置,分类数据的 range 的默认值是 [ 1 / (count - 1), 1 - 1 / (count - 1) ],count 代表数据的个数,可以修改这个值达到改变留白大小的目的。

G2(可视化引擎)
G2(可视化引擎)
精品推荐
同类推荐
    相关下载
    • 最新排行
    • 最热排行
    • 评分最高
    图形图像排行榜
    实时热词