使用 envision 设计仪表板

使用 Envision 设计仪表板


首页 » 资源 » 此处

Envision 仪表板由一些较小的单元构建而成,这些小单元被称为磁贴。磁贴的大小和颜色可以进行调整,也可以按您认为适合的程度在仪表板页面中排列磁贴。Envision 重视高效仪表板,在仪表板中,所有重要的商业数据排列在一个页面。即使是很复杂的仪表板,一般不到半秒就能显示。在本页面,我们将介绍如何从头开始设计 Envision 仪表板。

认识第一个仪表板

我们将使用样本数据集来设计我们的第一个仪表板。下面的截屏显示的是包含在您的 Lokad 账户中的仪表板。

Image

上面的仪表板使用下文详述的脚本生成。现在这段脚本可能会让您有点看不明白。接下来我们会逐行进行分析。
read "/sample/Lokad_Items.tsv"
read "/sample/Lokad_Orders.tsv" as Orders
read "/sample/Lokad_PurchaseOrders.tsv" as PO

show label "Hello World: my first dashboard" a1f1 tomato

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price{$}" c2d2 with min(SellPrice)
show table "Max selling price{$}" e2f2 with max(SellPrice)

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes{$}" a3f5 tomato with
Week.oamount as "Sold" 
Week.pamount as "Purchased"

show piechart "Sales by brand" a6c8 tomato with sum(Orders.NetAmount) group by Brand

show treemap "Stock value by supplier{$}" d6f8 tomato with 
Name
StockOnHand * BuyPrice
Supplier

show table "Top Sellers" a9f12 tomato with
Id as "Product ID"
Supplier
StockOnHand
sum(Orders.NetAmount) as "Sold{$}"
order by sum(Orders.NetAmount) desc
建议您此时登录到您的 Lokad 账户,点击创建Envision 脚本,然后复制并粘贴上面的脚本,最后点击开始运行。运行完成后,点击开始运行按钮下面最近运行中新显示的绿色链接,然后应当会看到与上面相同的仪表板。

该仪表板适应单个页面,点击其中的每个磁贴可以将其展开。点击大线形图,线形图将展开并充满整个浏览器窗口。如果在展开的磁贴周围的黑色区域中的任意位置再次点击,磁贴将缩回原始大小。

标题、位置和颜色

label 磁贴是 Envision 中最简单的磁贴。这个磁贴对于了解所有磁贴共享的通用属性(即标题、位置和主要颜色)是一个很好的起点。label 磁贴仅显示该磁贴中指定的文本片段,其字号根据对磁贴的适合程度进行调整。
show label "Hello World: my first dashboard" a1f1 tomato
所有磁贴均使用 show 语句显示。这个关键词后面跟有 4 个参数。第一个参数是磁贴类型。Envision 支持很多类型的磁贴,label 是其中之一。在下文中,我们将了解仪表板中同样呈现了的其他几种类型的磁贴。

紧随磁贴类型其后的是磁贴标题,磁贴标题用字符串定义,因此使用了引号 (") 分隔符。根据磁贴类型,标题的显示可能会有所不同,但标题通常显示在磁贴顶部。 接下来,紧随标题之后的是磁贴位置,上例中其位置为 a1f1。Envision 采用类似于 Excel 的网格来定位所有磁贴,列用字母表示,行用数字表示。因此,a1f1 应解释为从左上角 A1 至右下角 F1 之间的单元格。Envision 中不区分大小写,因此 A1F1 等同于 a1f1

最后一个参数是颜色,在上例中为 tomato。颜色参数为可选参数,如忽略此参数,将默认为使用颜色 black已命名的 Web 颜色也适用于 Envision。除了已命名的颜色,Envision 还支持hex triplet ,但做了小小的改动 - 忽略井号 (#)。例如,不要使用 #0099CC,而要使用 0099CC。但在实际中,从脚本编辑器直接编辑颜色是一件非常枯燥的事,因此一般不会这样做。

磁贴编辑器

尽管可以从脚本编辑器编辑磁贴的位置和颜色,但这样做并不太实用,因为脚本编辑器不具备可视效果。Envision 于是提供了第二种编辑器 – 磁贴编辑器。磁贴编辑器能够调整每个磁贴的标题、位置和颜色,此外还具备许多额外的功能,必要时能够加快仪表板的全面重新布局。

Image

在您的 Lokad 账户中,返回到以前生成的仪表板,然后点击编辑磁贴。每个磁贴上面会显示深色的覆盖层,用于描绘每个磁贴的位置坐标轮廓。这些坐标遵循上文所述的 Excel 网格约定。点击任意一个磁贴,例如点击顶部的 label 磁贴,会显示一个对话框,从中可调整该磁贴的属性。

您还会看到页面左侧有一个绿色的加号 (+) 按钮。这些按钮的用途是在按钮上方插入一条空白网格线。点击任意一个 (+) 按钮,会看到所有磁贴下移。如要将仪表板的一部分向上推(以及将一部分向下推)时,通过插入一条空白线会很实用。

Image

点击 (+) 按钮后,右侧会出现红色的减号 (-) 按钮。这些红色按钮与绿色按钮相对应,可用于删除空白线。但这条线必须为空白线才会显示红色按钮,因为这样可以防止删除仍然包含有磁贴的线。 在对脚本进行编码时,通常我们建议不要将过多注意力放在磁贴的位置和颜色上。如果最后重叠磁贴,Envision 会自动重新排列此类磁贴以确保这些磁贴可见。所以不存在磁贴位置摆放错误的风险。磁贴编辑器会提供仪表板的最终视觉效果。

显示单一值指标

显示上百万条数据很容易,但每天显示 10 条值得去解读的数据非常难。在构建仪表板时最常见的一种使用情形便是设计一个仅包含单一值的磁贴。使用 table 磁贴可实现这一行为。对于表中仅有一个单元格(即为 1x1 的表)的情形,这种磁贴可提供一种特殊显示。下面的脚本在相关行中显示了 4 种不同的指标。
show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price{$}" c2d2 with min(SellingPrice)
show table "Max selling price{$}" e2f2 with max(SellingPrice)
show table 语句以类型、标题、位置和颜色选项开始;其模式与 label 磁贴所使用的模式相同。这些选项后面跟有 with 关键字。对于所有包含数据的磁贴而言,with 关键字表示要枚举磁贴中包含的变量。在这里,磁贴仅包含单一值,但在下面的部分可以看到,有些更复杂的磁贴嵌入了多个值。

至此我们还没有介绍过 Envision 的聚合功能。简单提一下,sum()min()max() 都是聚合器,其运算也与在 Excel 中的运算大体相同。

sum(1)Orders.1 可能会让人有点费解。在执行初次计算时,Envision 主要处理矢量。所以说 sum(1) 是略微冗长的脚本变量的语法糖:
OnePerLine = 1
show table "Items" a2 with sum(OnePerLine)
在上面的代码段中定义了矢量 OnePerLine,按照惯例,该矢量属于项目表。因此,每个项目(也即项目表中的每一行)都会被赋予值 1。对所有值求和得出的就是 Items 表中列出的项目总数。同样,sum(Orders.1) 的作用等同于以下替代代码段:
Orders.OnePerLine = 1
show table "Orders" b2 with sum(Orders.OnePerLine)
赋值是一项矢量运算,Orders 表的每一行赋值为 1。在对所有这些值求和时,同样得出表中的总行数。对于任何表,都可以编写 MyTable.42 作为语法糖来将值 42 赋给匿名矢量。

最低价格的显示遵循同样的聚合模式,但在对仪表板仔细观察后发现,此处的视觉行为略有不同。实际上,显示的卖出价以美元符号 ($) 作为指标的测量单位。查看脚本中的相关行可以了解实现这种行为的过程。
show table "Min selling price{$}" c2d2 with min(SellingPrice)
这种行为通过标题末尾的 {$} 标记来实现。按照惯例,Envision 将标题中的包括在花括号中的内容都作为适用的“单位”处理。单位通常显示在值的右侧,例如 42 英里,但有些单位,更具体地说是货币单位例如 $ 或 £,则通常为前缀,Envision 中采用的就是这种模式。

显示线形图

线形图也是 Envision 中最常用的一种磁贴类型。在本例中,由于需要周期性地(每天、每周、每月)聚合数据,因此使用线形图比至此所见过的这些磁贴略微复杂。我们来看一下用于显示线形图的一段脚本。
Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(O.NetAmount)
show linechart "Weekly volumes{$}" a3f5 tomato with
Week.oamount as "Sold"
Week.pamount as "Purchased" 
Week 表并非一种常用的表,因为没有从数据中加载此类表。实际上,在商业中、在 Envision 中经常会遇到周期聚合的情况,此类周期聚合会优先处理。所以涉及周期聚合的运算实施起来非常简单。但 Envision 语言在这方面的表现远远超越了本文档的范畴。Week 好比一个容器,数据分组保存在“每周”桶中。

接下来是一种特殊赋值 :=,这种赋值称为"标量赋值"。该赋值不同于常规的 = 赋值,因为标量赋值并非每个项目计算一个值,而是只计算与所有项目无关的一个值。在所给出的案例中,前两行是针对 Week.oamount 每周计算一个值,以及针对 Week.pamount 每周计算另一个值。

show linechart 开始的线形图语句比简单的 label 磁贴略长。为避免较长甚至不可读的语句,我们使用了"块语法"。块应当以 with 开始,然后可以在下面列出所有磁贴参数,每行一个参数。

在换行之后,我们可以看到列出了两个矢量:Week.oamountWeek.pamount。如前所述,在 with 后面可以列出用逗号分隔的一个或多个变量。这些变量按磁贴显示。在本例中,这两个变量传递至磁贴。一个线形图可以支持两个以上的变量,但在实际中,建议您不要包含超过 3 个变量,因为如果脚本中的代码行超过 3 行,此类图表的可读性往往不高。

作为参数传递至磁贴的变量也可以显式重命名。这一行为通过 as 关键字实现,其后跟随用于定义新名称的字符串。每种磁贴类型都有其特定的通过处理变量名称来改进磁贴外观和感官的途径。例如,线形图将这些名称转化为图例显示在实际图表的下方。所有磁贴都共享使用 as 关键字的变量命名机制,并不仅仅局限于 linechart。关联 as 的字符串也可以包含测量单位,其行为与标题相同。

默认情况下,线形图会根据磁贴本身指定的颜色挑选一系列颜色。但也可以根据所要绘制的各行来指定一种颜色。这个过程可以使用以下语法实现:
show linechart "Weekly volumes{$}" a3f5 with
Week.oamount as "Sold" color: "blue"
Week.pamount as "Purchased" color: "red"

显示表

我们暂且先跳过 piecharttreemap,直接详细介绍对表进行的更高级的使用。尽管表的可见性不是太高,但表可能是以操作为导向的仪表板中用途最广的部分之一。表常用于显示区分优先级的操作列表,例如库存过多的产品或库存最不足的产品。在上面的脚本中,我们在脚本最后定义了一个较复杂的表(我们把它复制下来,以便更清楚地进行说明)。
show table "Top Sellers" a9f12 tomato with \
  Id as "Product ID", \
  Supplier, \
  StockOnHand, \
  sum(Orders.NetAmount) as "Sold{$}" \
  order by sum(Orders.NetAmount) desc 
这条语句也可以写成一行,但为了提高可读性,我们使用反斜杠符号 / 引入了多行。其语法遵循 Envision 的一般规范,在这里可以看出,with 关键字后面列出了 4 个变量。声明最后是一条特殊的 order by 语句,我们将在下文进行说明。

此外,Envision 不仅支持列出变量,也支持列出表达式。我们在上面的第 4 行中使用了这项功能。sum() 在项目级计算聚合,这项计算直接在磁贴中表示。通过使用以下语句可以提前声明矢量:
Sold = sum(Orders.NetAmount)
show table "Top Sellers" a9f12 tomato with \
  Id as "Product ID", \
  Supplier, \
  StockOnHand, \
  Sold as "Sold{$}" \
  order by sum(Orders.NetAmount) desc 
利用在磁贴语句中声明表达式的功能,可以让脚本变得更紧凑,更易读和更便于维护。

来看最后一行,这一行以 order by 开始,顾名思义,这一行控制要在表中显示的行的顺序。desc 标志表明将使用降序。而如果忽略 desc 标志,则将使用升序。