axchart元件库

Axure RP8/9可视化动态元件库,支持全部antv/echart图表,高保真可视化原型超级助手。

¥35 现在购买

数据可视化的本质是将数据映射到图形,继上次总结数据基础知识后,本文梳理了图表基础知识,了解不同类型的数据适合怎样的图表。

如下图所示,常见的统计图表主要包含8个主要组成部分,axChart根据这些组成部分进行相应的配置项设置,如果熟悉各个组成部分,不仅在使用axChart时配置图表参数更容易,而且对从事可视化产品设计、自定义图表研发也有一些帮助。

axChart可视化图表知识分享之图表基础

Q1坐标系:一种2维定位系统(暂不论3d图表),描述了数据是如何映射到图形所在平面。

Q2坐标轴:一般包含2个坐标轴,表达坐标系中数据在方向上的映射关系。

Q3数据列图形:即具体所使用的点、线、面等几何图形,用其表示一个或多个数据列。

Q4图例:使用颜色、大小、形状区分不同的数据列,用于图表中数据的筛选。

Q5提示信息:指鼠标悬停在图表上的某点时,以提示框的形式展示该点的数据。

Q6标签文本:标签是对当前数据进行的内容标注,不同的图表类型标签有所不同,最常用的是文本数值。

Q7辅助元素:在图表上增加线条、区域带、文字描述等,用于在图表上标识额外注解。

Q8图表标题:一般包含主标题和副标题。

1 图表组成

1.1 坐标系

坐标系是数据的定位系统,描述了数据是如何映射到图表图形所在的平面的。常见的坐标系主要是直角坐标系和极坐标系(普通极坐标系、螺旋坐标系、角度极坐标系)。

axChart可视化图表知识分享之图表基础

1.2 坐标轴

轴的元素一般包括:轴标题、轴标签、轴线、轴刻度线和坐标网格线。

axChart可视化图表知识分享之图表基础

1.2.1 轴标题

用来描述当前轴标签数据的意义。为了提升axChart的灵活性,不支持对坐标轴标题的设置,可在Axure原型中插入文本元件直接输入标题。

1.2.2 轴标签

轴标签均会显示,且可响应式自动调整。使用axChart时不需进行轴标签设置(大部分情况),大部分统计图表基于antv开发,其在轴标签上有以下自动调整规则:

连续轴、时间轴:默认自动抽样+不旋转标签。

分类轴:默认自动旋转+自动省略部分标签文字。

axChart可视化图表知识分享之图表基础

axChart可视化图表知识分享之图表基础

因此,设置数据类型时,准确的设置数据类型,轴标签将可能显示得更加合理。

1.2.3 轴线

界定图表绘图区的线条,用做度量的参照框架。AxChart自动根据不同类型图表设置轴线是否显示,一般不需要自行配置轴线。

1.2.4 轴刻度线

轴线上的小线段,是数值标签在坐标轴上的明确位置,其还可包含子刻度线。axChart会自动确定如何显示轴刻度线,不需要自行设置。

1.2.5 网格线

坐标轴上刻度线的延伸,添加到图表中易于查看和计算数据的线条。axChart自动根据不同类型图表设置网格线的显示方式,一般不需要用户设置网格线。

1.3 数据列图形

反应一组或多组数据列的图形表现形式,即所说的点、线、面等图形。其直接反映了图表的类型,如散点图、折线图、柱状图、面积图等,也可以是多种图形的混合图表。使用axChart时,选择何种图表,即表示使用对应的数据列图形,用户不必关心图形的选择。

axChart可视化图表知识分享之图表基础

1.4 图例

图例是图表的辅助元素,用不同形状、颜色或文字标示不同数据列,通过点击图例可以显示或隐藏该数据列,图例的元素一般由图形+文本组成。

axChart可视化图表知识分享之图表基础

axChart会根据设置的数据列图形属性以及数据类型自动生成不同的图例,并根据状态不同,图例自动设置为静态或可交互态。根据信息获取的效率和体验,每一个图表的图例都有默认的位置,但在使用时,用户可以手工设置axChart图表元件的图例展示位置(支持12个方位:上左、上中、上右、下左、下中、下右、左上、左中、左下、右上、右中、右下)。

1.5 提示信息

提示信息指当鼠标悬停在数据列图形上时,以提示框的形式提示该点的数据,比如该点的值、数据单位等。默认的提示信息,一般包含了视觉标记图形、文本标签和数值。

axChart可视化图表知识分享之图表基础

提示框的信息可以通过格式化函数自定义,axChart为方便产品经理使用,针对每种图表,已选择最恰当的提示方式,因此不支持自行设置提示信息配置。但可以配置是否展示提示框,如果设置为false则鼠标移上去也不再显示提示信息。

1.6 标签文本

在图表中,标签是对当前的一组数据进行的内容标注,包括数据点、拉线、文本数值等元素。

axChart可视化图表知识分享之图表基础

标签使用时,显示位置会影响标签的可阅读性,通常标签显示在图形外部,但在堆叠类图表,标签会显示在图形内。在使用axChart时,大部分图形的标签位置会自动选择显示的位置,但小部分图可以通过配置,指定显示的位置(内、外)。

1.7 辅助元素

在实际数据分析时,可以为图表添加辅助元素,进行标记注解。其完全是个性化、场景化的需求。因此,axChart图表元件并不支持辅助元素的添加。

axChart可视化图表知识分享之图表基础

以antv G2为例,常用做辅助设计的形式如下:

(1)辅助线(可带文本):例如表示平均值或者预期分布的直线;

(2)辅助图片:在图表上添加辅助图片;

(3)辅助文本:指定位置添加文本说明;

(4)辅助框:框选一段图区,设置背景、边框等;

(5)区域着色:将图表中位于矩形选区中的图形元素提取出来,重新着色;

(6)html:辅助 html,指定位置添加自定义 html,显示自定义信息;

(7)辅助弧线:表示预计分布的曲线;

(8)特殊数据点标注:多用于折线图和面积图;

(9)特殊数据区间标注:多用于折线图和面积图。

但是,为图表添加辅助元素,可以使得图表与分析结果结合得更加紧密,因此,如果需要在原型中添加辅助元素,需有一定编码基础,可直接编写图表代码(推荐去antv或echart官网示例上修改),然后复制到axChart的code元件中,就能显示到原型中。

1.8 图表标题

图表标题默认显示在图表的顶部,一般包含主标题和副标题。由于相对静态,axChart都不支持设置图表标题,使用时,可直接在原型上使用文本元件输入任意标题,更加便捷、更加灵活。

2 数据映射

我们也可以了解一些数据映射的逻辑,加深对数据空间到图形空间的转化方式的理解,更详细的设计原理可以参看:https://g2.antv.vision/zh/docs/manual/tutorial/scale

2.1 数据归一处理

表示将原始数据转化为[0,1]区间的转化,从而进行图形化表现,在antv中称之为“度量Scale”。不同的数据类型对应不同的转化方式,比如:

(1)连续型数据,如有一组0,1,2,4,7,10的数据,原始数据范围是[0,10],归一处理为[0,1]范围的数据,变为0,0.1,0.2,0.4,0.7,1。

(2)分类数据,如[男,女]转为为0,1两个数值。

通过归一化处理后,核心的作用是:方便将数据映射到位置、颜色、大小等图形属性上。比如在200px*200px的坐标轴上,[10,20,50,80]归一化为[0.1,0.2,0.5,0.8]后,与200px的乘积就是其对应的坐标的实际位置。

2.2 归一处理的类型

如果有一组数据为[10,1000,100000,10000000]进行归一处理后,其在坐标系的位置可能导致较小的数据无法观察到其所在位置(接近于0),因此简单的按照等比例归一到[0,1]在实际图表中不一定恰当。因此,antv在归一处理上,支持多种归一处理方式。

数据类型 归一处理方式
连续 linear、log、pow、time
分类 cat、timeCat

axChart元件中,如果不设置数据的归一处理方式:如果是数字,默认为linear处理;如果是字符且是时间格式,则默认是time处理;如果是字符且不是时间格式则为cat处理。axChart从v1.0.7开始支持指定数据列归一处理的类型配置。

2.2.1 linear处理

表示连续线性地归一处理,如[1,2,3,6,9,10]处理为[0.1,0.2,0.3,0.6,0.9,1]。

axChart可视化图表知识分享之图表基础

除此之外,还需要关注数据列的范围,使得图表表现更加合理。比如,小红考试70分、小蓝考试90分,归一处理后为[0.7,0.9],图表默认显示0.7-0.9的位置,然后我们知道一般分数是0-100分,因此可以设置数据列的最小值是0、最大值是100,这样图表显示的位置更加合理。又如,11日温度是10℃、12日温度是16℃,我们可根据当地历年温度设置恰当的最小值和最大值(而非0和100)。如果不设置最小值和最大值,图表也能正常映射,只是起始范围可能与实际生活认知略有不同。由于数值范围根据业务差异较大,因此axChart不支持数值范围设置,会自动取数值范围。

2.2.2 log处理

连续非线性的log归一处理,如[1,10,100,1000]处理为[0,1,2,3],从而实现将非常大范围的数据映射到一个均匀的范围,图表识别体验更好。

axChart可视化图表知识分享之图表基础

2.2.3 pow处理

连续非线性的pow归一处理,如[2,4,8,16,32]处理为[1,2,3,4,5],从而实现较大范围的数据映射到一个均为的范围。

axChart可视化图表知识分享之图表基础

2.2.4 time处理

连续的时间类型,是一种特殊的连续型数据。axChart会自动识别时间戳(143283992200)和时间字符串(2015-03-01、2015/03/01、2015-03-01 12:01:01、2015-03-01T12:00:00.000Z)并按照时间进行排序。

axChart可视化图表知识分享之图表基础

2.2.5 cat处理

分类数据处理,如[好,中,差]处理为[0.25,0.5,0.75]。

除此之外,antv可设置cat度量的values字段,一一对应分类数据的顺序,可以调整分类数据的显示顺序。axChart不支持分类数据的顺序设置,一般会根据原始数据中分类数据的顺序进行显示。

axChart可视化图表知识分享之图表基础

2.2.6 timeCat处理

有序的时间分类数据,如股票交易日期。如果股票交易日期按照time连续数据处理,由于节假日没有数据,会导致K线图断裂;因此按照timeCat有序分类数据处理,就会默认按照数据排序展示且没有断裂。

axChart可视化图表知识分享之图表基础

现实业务场景较为复杂,因此antv可以直接操作归一处理的方式(即操作度量)实现更加符合业务场景的需求。作为通用配置项,axChart从v1.0.8开始,支持对各个字段配置归一处理的类型,但是数值范围、分类数据顺序的配置不会支持,一定程度上可以满足原型设计的需求。

3 图表分类

根据图表的类型,我们将常用的可视化图表分为:统计图表、关系图、地图三大类,图表分类及axChart元件支持中继器参数配置情况如下:

图表大类 图表小类 图表 axChart中继器配置 备注
统计图表 折线图 基础折线图 支持
多折线图 支持
双轴折线图 支持
动态折线图 支持
迷你折线图 支持
柱状图 基础柱状图 支持
堆积柱状图 支持
分组柱状图 支持
百分比柱状图 支持
极坐标柱状图 支持
区间柱状图 支持
瀑布图 支持
直方图 暂不支持 预计在v1.0.7支持
动态柱状图 支持
迷你柱状图 支持
条形图 基础条形图 支持
堆积条线图 支持
分组条形图 支持
区间条形图 支持
玉环图 支持
对称分组条形图 暂不支持 预计在v1.0.8支持
动态条形图 支持
迷你条形图 支持
混合图 折线柱形图 暂不支持 预计在v1.0.8支持
饼图 基础饼图 支持
玫瑰图 支持
面积图 基础面积图 支持
堆积面积图 支持
河流图 暂不支持 预计在v1.0.7支持
迷你面积图 支持
散点图 基础散点图 支持
气泡图 支持
漏斗图 基础漏斗图 支持
对比漏斗图 支持
对称漏斗图 支持
股票图 K线图 支持
烛性图 支持
单指标卡 动态数字 支持
动态日期 支持
圆环图 支持
仪表盘 支持
动态进度条 支持
指标卡 不支持 不支持,一般用动态数字可实现
水波指标图 支持
其它统计图 雷达图 支持
箱型图 支持
词云图 支持
仪表盘 支持
关系图 树图 基础关系图 支持
紧凑树图 支持
矩形树图 支持
旭日图 支持
其它关系图 弧线图 支持
和弦图 暂不支持 预计在v1.0.8支持
桑基图 支持
力导向图 支持
地图 地理图 Geo地图 支持
百度地图 支持
高德地图 支持
热力图 网格热力图 支持
日历热力图 支持
分箱热力图 支持
普通热力图 支持
地理热力图 支持

除以上图表分类外,为方便axChart用于原型设计,还提供了antv/echarts源码运行元件、可视化背景组件等。

分享到:
赞(1)

评论 抢沙发

Avatar
7 + 2 =


axChart可视化图表知识分享之图表基础

长按图片转发给朋友

axChart1.1.0更新啦
3月31日axChart更新,基于最新antv重构,新增图表滑块支持、新增antv_coderun_4x元件复制运行官网示例。
切换注册

登录

忘记密码 ?

切换登录

注册