可视化图表操作实例

来自BDP个人版帮助中心
跳转至: 导航搜索

手把手教你制作一个带有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属性:
柱形图-4.png

marks中可以有多个图形,每个图形可以设置自己的类型type,rect代表使用矩形(rectangles)。有了图形,还要描述6个柱子根据什么数据画,使用from属性,说明数据来自第一个数据集,在BDP中通常使用数据视图中的数据集作为数据来源。如果不指定from会默认画一个图形。

图形的可视化属性在encode中设置,如颜色、大小,分为几个状态:

  • enter,图形第一次绘制,设置了柱图的位置和大小;
  • exit,图形被删除或移除时,本次没用到;
  • update,图形设置更新或改变,设置了柱图的颜色,创建后会首次进入更新状态;
  • hover,鼠标移动至图形上,设置了鼠标移动到柱子上需要改变的颜色;

这里看到颜色没在enter中设置而是在update中设置,这是因为hover设置了颜色改变,如果不设置在update中,鼠标经过柱子后将出现一个永久红色的柱子。 重点说明创建时如何画出基础图形:
柱形图-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轴,包含刻度和值。
柱形图-7.png
简单的坐标轴只需要设置轴的方向和使用的图表数据,系统会自动生成坐标轴。这里指定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的偏移量,与柱子分隔。
柱形图-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还有很多强大的可视化能力,下面简要介绍,点击查看官方文档,大家可以尝试做出有意思的效果:
支持的其他Mark
柱形图-11.png

支持的其他Scale
定量转化:
柱形图-12.png
离散转化:
柱形图-13.png