查看“可视化图表操作实例”的源代码
←
可视化图表操作实例
跳转至:
导航
、
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
===手把手教你制作一个带有Tooltip提示的框的柱图!=== [[文件:柱形图-1.png]] ====1.准备数据==== 柱图需要两个信息,维度和每个维度的柱子,在数据视图中制作一个包含一个维度一个数值的结果,如下图表示每日这个渠道的用户访问量,可提供三个在图表视图引用的变量: *$DATA_VIEWS[0],代表“访问数据集” *$X_FIELDS[0][0].id,代表“发送时间”维度中的值 *$Y_FIELDS[0][0].id,代表“会话量”数值中的值 [[文件:柱形图-2.png]] ====2.画图数据==== 有了数据,但是画图不能直接用数值结果,比如收入10亿,在图中怎么画?换个角度,需要将数据转换为图中的位置,如用20个像素代表10亿。展示柱图确定柱子的宽度和高度,这就用到了scale,坐标比例尺,将原始数据转换为画图可用的数据。 *宽度——现在有6个维度,也就是6个柱子,每个宽度一样,所以每个珠子的宽度应该是"图表的宽度"/6 *高度——每个柱子的高度由数字决定,应当在图表高度中按照数值大小分布,分布方式有很多种,如线性分布,按照数值比例获取占高度的大小 [[文件:柱形图-3.png]] 定义两个scale分别代表宽度坐标(xscale)和高度坐标(yscale),每个scale需要有个唯一的名字name,之后使用时会调用这个名字。 *其中宽度坐标需要均分图表宽度,转换类型设置为等分组band,代表按照维度个数平分图表的宽度;如宽度为600时,第一个维度的坐标将为[0-100]。domain为转换坐标的数据来源,上图中使用第一个数据集和其第一个维度字段。range为目标范围,如上图代表将“width”图表宽度设为目标值,分组将等分这个值。 *高度坐标没有设置type,默认为linear,线性分布,可理解为按原值占比获取其在高度目标值的占比,。目标范围设为“height“图表高度。数据使用数据集的第一个数值“会话量”。这里用的nice属性为Vega提供的美化语法,可将转换结果进行一定程度处理,使结果更易理解,达到更好的展示效果,如[0, 94.345]自动转换为[0, 100]。 *range中使用的“width”和“height“为Vega的预置的内部变量,可直接引用图表的宽度和高度;用户也可以手动指定值域数组,如[0, 400]and [200, 0]。当type为band时,range可以指定每个柱子的步长,步长=柱子宽度+边距,如设定步长为60,最终柱图总长=60*6=360。当type为ordinal时,range还可以指定一个长数组,指定自定义的颜色序列(如RGB十进制"#ffa804")。 *domain可使用数据视图中数据集结果或数组及各种外部JSON数据,如CSV等。数据转换默认支持处理数值为零的数据,可以通过设置"zero": false,取消该特性。 *比例尺转出的图表数据与原始数据结构对应,使用时需要按照原始数据结构对应,如在画图数据中使用y0代表使用第一个数值字段转换出的画图坐标。 ====3.图形==== 图形是Vega中最主要的元素,将可视化都拆解为图形的组合,如上面的柱图,每个柱子是一个矩形,共6个矩形,用到了marks属性:<br> [[文件:柱形图-4.png]] marks中可以有多个图形,每个图形可以设置自己的类型type,rect代表使用矩形(rectangles)。有了图形,还要描述6个柱子根据什么数据画,使用from属性,说明数据来自第一个数据集,在BDP中通常使用数据视图中的数据集作为数据来源。如果不指定from会默认画一个图形。 图形的可视化属性在encode中设置,如颜色、大小,分为几个状态: *enter,图形第一次绘制,设置了柱图的位置和大小; *exit,图形被删除或移除时,本次没用到; *update,图形设置更新或改变,设置了柱图的颜色,创建后会首次进入更新状态; *hover,鼠标移动至图形上,设置了鼠标移动到柱子上需要改变的颜色; 这里看到颜色没在enter中设置而是在update中设置,这是因为hover设置了颜色改变,如果不设置在update中,鼠标经过柱子后将出现一个永久红色的柱子。 重点说明创建时如何画出基础图形:<br> [[文件:柱形图-5.png]] 画图形四要素,描述图形水平、垂直方向的起始和结束值,x、width确定水平位置和每个柱子宽度,y、y2决定了垂直位置和柱子高度: *x,每个图形起始位置,如柱图中每个柱子的的左侧坐标,画图数据使用定过的水平坐标"xscale"中的第一个维度x0;"offset": 1第一个柱子前的偏移量,与其他柱子间隔1像素的样式保持一致; *width,每个维度所占的宽度,即柱子的宽度,使用已经计算好的"xscale"中的等宽长度。"band": 1代表使用比例尺计算的大小,可以设置0-1的小数代表使用比例尺结果的百分比结果,如"band": 0.5代表使用比例尺结果的一半; *y、y2,柱子顶部的高度,类似x、width,每个柱子垂直方向的起始位置和结束位置,也可以使用类似的height,这里由于每个柱子都是从水平线开始,使用y2将起始值固定为0。实际上Vega也不区分y、y2哪个是起始值,只要设置了两个值系统会自动按照坐标大小调整位置。< br> [[文件:柱形图-6.png]] 除了标准的图形,Vega支持将图形嵌套分组,通过group属性,可以包含其他图形,如制作BDP中的对比拆分图。分组中可以自定义比例尺和坐标轴。 PS:坐标系起始值[0.0]在预览区域的的左上角。预览时发现图形并不是从预览区域的左下角开始,这是因为自定义图表默认启用了自动缩放大小,Vega默认为四周留了边距,可以使用"autosize": "none"取消自动缩放,注意关闭后在BDP仪表盘中调整图表大小将不影响可视化效果。 ====4.坐标轴==== 柱图还有坐标轴,分为X轴和Y轴,包含刻度和值。<br> [[文件:柱形图-7.png]] <br> 简单的坐标轴只需要设置轴的方向和使用的图表数据,系统会自动生成坐标轴。这里指定X轴在底部使用通过日期维度转换出的画图数据;Y轴在左侧使用数值的画图数据,同时设置了"tickCount": 7默认分为7组刻度,并设置"offset": 6向右移动6个像素的偏移量。 ====4.变量==== 变量是Vega中一种非常实用的属性,可以在发生事件或其他变量变化时,重新计算结果,柱图中的Tooltip提示框就需要用到变量实现。每个变量需要一个唯一的名称name和一个初始值,其他属性用于定义变量如何计算。 Tooltip内容通常为所在图形的值,位置在图形上方,所以为了在鼠标移动在某个柱子时需要根据这个柱子展示,需要一个记录当前柱子的变量,并根据这个属性绘制出提示文本框。 *创建变量 先设置一个变量为“tooltip”,初始值为空,变动实际在两个事件,矩形rect的鼠标移入mouseover和移出mouseout事件;在鼠标移入时将变量赋值为鼠标所在矩形的数值对象"datum",鼠标移出时将变量值设回空值。这是一个Vega特殊的内置变量,代表当前的数据对象,在当前的事件中代表的数据包含这个柱子的日期和会话量,在Data中使用时可代表所在的完整数据集。 [[文件:柱形图-8.png]] *确定位置 Tooltip应动态展示在柱子顶部的中间,使用"update"每次根据当前柱子的坐标,将文本框绘制在正上方,"x"、"y"坐标均使用处理好的水平和垂直的画图数据,从画图数据中获取某个柱子坐标时,需要通过原始数据的内容找到对应的转换结果,当移动至某个柱子时变量tooltip值为其的原始数据对象,"tooltip."+x0即引用了这个柱子的日期维度。为了能坐标点在每个柱子中间,获取水平画图数据时,缩放50%"band": 0.5;在垂直方向保留了-2的偏移量,与柱子分隔。<br> [[文件:柱形图-9.png]] [[文件:柱形图-10.png]] ====6.完整代码==== { "signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "ds0", "field": "x0"}, "range": "width" }, { "name": "yscale", "domain": {"data": "ds0", "field": "y0"}, "nice": true, "range": "height" } ], "axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale", "tickCount": 7,"offset": 6 } ], "marks": [ { "type": "rect", "from": {"data":"ds0"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "x0", "offset": 1}, "width": {"scale": "xscale", "band": 1, "offset": -1}, "y": {"scale": "yscale", "field": "y0"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} }, "update": { "x": {"scale": "xscale", "signal": "tooltip."+"x0", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip."+"y0", "offset": -2}, "text": {"signal": "tooltip."+"y0"}, } } } ] } ====7. 更多用法==== 已经有了第一个自定义图表,Vega还有很多强大的可视化能力,下面简要介绍,点击查看官方文档,大家可以尝试做出有意思的效果:<br> 支持的其他Mark<br> [[文件:柱形图-11.png]]<br> 支持的其他Scale<br> 定量转化:<br> [[文件:柱形图-12.png]]<br> 离散转化:<br> [[文件:柱形图-13.png]]<br>
返回至
可视化图表操作实例
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
数据接入
对接概况
数据源列表
文件上传
BDP Excel 插件
BDP PPT 插件
同步客户端 (金钻可使用)
文件同步宝 (银钻以上可使用)
数据处理
字段类型
创建合表
工作表管理
地址转经纬度
可视化分析
拖拽分析
维度、对比和数值
图表类型
筛选器
字段设置
计算字段函数说明
参数
多层钻取
高级计算
颜色与条件格式
预警与辅助线
对比拆分
其他图表设置
GIS地图
基本操作
气泡图
热力图
海量点图
统计图
仪表盘
仪表盘管理
仪表盘布局
仪表盘图文模式
全局筛选器
图表联动
大屏模式及导出
仪表盘分享
自定义图表
简介及基本操作
可视化图表(Vega)语法简介
可视化图表操作实例
可视化图表示例集
表格拼接
Javascript
如何使用Echarts
常见问题
版本
账号相关
工作表
图表
分析
工具
链入页面
相关更改
特殊页面
页面信息