精读《VisActor 数据可视化工具》

黄子毅

发布于 2023-10-22 18:54:23

4550

发布于 2023-10-22 18:54:23

文章被收录于专栏：前端精读评论

最近数据可视化领域开源了一套 VisActor 方案，虽然刚开源没多久，但产品矩阵已经颇有特色，我们可以从中学习一下数据可视化领域是如何设计顶层架构的，以及对未来 3-5 年可视化领域的发展规划。

目前 VisActor 开源出来的库有如下几个：

绘图引擎 VRender
图形语法 VGrammar
图表库 VChart
表格 VTable

其中 VChart 与 VTable 就是我们业务上常用的图表与表格库，而 VGrammar 是更底层的图形语法库，使用一套通用的结构描述任意图形，而最底层的 VRender 则是与浏览器绘图 API 的桥阶层，是一套绘图 API 抽象。

其实除了这些已经开源的仓库外，还有很多更前沿的产品矩阵在筹备开源中，完整的产品矩阵如下图：

接下来自下而上介绍一下这个产品矩阵是如何堆起来的。

绘图引擎

VRender 绘图引擎是对浏览器绘图 API 的封装，你可以用它来画图、渲染文字，一旦像素渲染出来，就可以享受到统一的 API 对其控制，甚至做动画，而且也无需关心底层使用了 WebGL 还是 Canvas 方案，是一套对图形渲染的通用约定，可以跨平台实现，它的本质是对图形渲染的底层 API 抽象了一套稳定的约定，而不关心具体实现。

提供了如 createRect、createSymbol 等一系列创建图元的 API：

const graph = VRender.createRect({
  x: 100,
  y: 100,
  width: 160,
  height: 120,
  // ...
});

以及进阶的动画、渐变、SVG Path、文本、富文本、3D 模式等等。

图形语法

VGrammar 在 VRender 是命令式基础上封装了图形语法概念，提供了声明式语法。我们主要使用的图表库比如 VChart 都还在 VGrammar 的上层，相比图表库，VGrammar 的概念更细，比如拥有自定义 x、y 轴、各种类型的图元、鼠标 hover 的 crosshair 等等。

之所以在顶部放了一张小提琴图来表示 VGrammar，是为了突出其灵活自由图形绘制能力，因为其提供了大量类型的图元，通过组合，我们可以任意定制图表效果，而且背后都是一套统一的图形语法与数据格式，大概的用法如下：

const spec = {
  // 数据
  data: [{ id: "table", values: [{ value1: 100, value2: 200 }] }],
  // 定义数据到视觉通道的映射
  scales: [
    {
      id: "colorScale",
      type: "ordinal",
      domain: ["A", "B"],
      range: ["red", "blue"],
    },
  ],
  // 图元
  marks: [
    {
      type: "rect",
      encode: {
        update: {
          // 定义对应的通道
          fill: { scale: "colorScale", field: "type" },
        },
      },
      // 还支持动画
      animation: {
        enter: {
          /** ... */
        },
      },
    },
  ],
  // 坐标轴设置，比如启用极坐标
  coordinates: [],
};

vGrammarView.parseSpec(spec);

VGrammar 将所有绘图的特征抽象为一个个内置图元组件，让我们可以用统一的图形语法绘制几乎任何定制的图表，只要前期学习一下其概念，就可以获得统一的开发体验。

开箱工具库

VChart 则是基于 VGrammar 将业界常见的可视化分析形态固化了下来，比如折线图、漏斗图、地图等等，将最佳实践包裹成一套更上层的易用语法，使开发者在没有强烈定制诉求时，可以最低成本快速实现一个标配图表，比如以下代码可以画一个折线图：

const spec = {
  type: "line",
  data: {
    values: [
      {
        time: "2:00",
        value: 8,
      },
      {
        time: "4:00",
        value: 9,
      },
    ],
  },
  xField: "time",
  yField: "value",
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();

符合直觉的数据格式、不用理解图元、视觉通道等概念，无需复杂的定制即可完成绘图，且几个简单的参数即可开启复杂的时序动画，这就是 VChart 提供的服务。

智能化工具库

大模型结合是数据可视化相对前沿的领域，VisActor 也分别提供了 Vmind、VStory 解决方案。

VMind 利用大模型实现自然语言生成图表配置，无论是开箱工具库、图形语法还是绘图引擎层的代码都可以生成，所以 VMind 可以向下穿透，直接服务于任何一层能力。第二步是结合算法与大模型对生成的图表内容进行分析与解读，这背后有多种实现思路，比如纯算法、大模型生成算法代码、数据直接生成解读以及图片解读，这取决于大模型的能力。

VStory 则利用大模型生成可视化叙事视频，需要一些简单的输入确定视频主题与背景数据，就可以自动生成合适的图表，最后串联成视频。把开箱工具库、图形语法与绘图引擎当做材料，使用大模型串联成故事，这就是 VStory 正在做的事情。

Headless BI

数据可视化工具为数据分析服务，所以 BI 领域是其最大的业务场景。现在各个粒度的工具都备齐了，要搭建 BI 就只剩临门一脚了，所以 VisActor 准备把这最后一脚也踢出去，所以提出了 Headless BI。

Headless BI 不是一个虚拟概念，它是一个实打实的 npm 包（虽然现在还没发布），将开发 BI 时的概念抽象出来，形成一个基础框架，你可以几乎零成本的用它打造一个属于自己的 BI 平台。

以下画了一张流程图：

用户配置图表信息，生成配置结构 VizSchema。
启用 VizService 服务，将 VizSchema 传入，内部会将 UI 配置中数据查询结构解析出来，转化为 SQL 查询，将查到的 RowData 结果转换为 VizData 数据结构返回给客户端。
客户端 Renderer 渲染器拿到 VizData 后，经过数据处理转化为使用对应的 VChart、VTable 等上层开箱工具库渲染出图表。

这种保姆级的使用方式，涵盖了 BI 图表生命周期的全链路，如果给前端加上画布渲染引擎就可以拓展出仪表盘或大屏业务场景；给后端加上高性能引擎与数据加速层就能拓展出具有竞争力的查询速度与自定义表达式。一个完整 BI 主要的要素几乎都涵盖在里面了。

读到这里，如果把 VisActor 每层的结构放在一起，从最底层的 VRender 开始，VGramma、VChart、VizData、VizSchema 这已经产生了 5 种数据结构，到底为什么要叠这么多层概念呢？

首先从最上层的 VizSchema 说起，报表 UI 配置结构里包括了对数据的配置，以及对 UI 渲染的配置，而且许多时候这些配置是相互耦合的，所以需要抽象出 VizSchema 专门针对前端 UI 的图表配置层。

接着需要在后端将 VizSchema 中查询部分提取出来转化成 SQL 取数，然后将查询结果按图表的类型进行数据加工，进而生成统一的 VizData 结构，仅凭 VizData 结构就可以真正渲染出图表了，而图表可能采用的方案不尽相同，比如富文本、指标卡可能采用 DOM 方案，统计图表采用 VChart，表格采用 VTable，而地图采用 VGis 等等，业务上还可能追加数据标注、评论等更多上层能力，这些都可以融合在 VizData 结构中，再有渲染器路由到不同实现。

而到了 VChart、VTable 这一层，就没必要继续往下了，因为 Headless BI 是一个标品，直接使用各领域标准封装的开箱工具库渲染就行了，最后这些工具库背后会再拆解到图形语法与绘图引擎层，最后才是与浏览器 API 接触，这部分链路除了在浏览器中，也可以封装在 Node 服务中实现截图服务。