查看“可视化图表操作实例”的源代码

===手把手教你制作一个带有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>