基于 Flutter 的图形语法库，通过跨端 Canvas ，将基于 Javascript 的图形语法库 ChartSpace 扩展至 Flutter 端

作者：字节跳动终端技术——胡珀

背景

数据平台有个基于图形语法的图表库 ChartSpace，支持 web/h5/mini program，现在收到业务诉求，要支持到 Flutter 端。

为方便理解，稍微解释下图形语法的概念，已经了解的小伙伴可以跳过这一段。

图形语法

图形语法（grammar of graphics） 是通过一套语法来描述任意图形，主要来自 Wilkinson 的《The Grammar of Graphics》，可参考文章：https://zhuanlan.zhihu.com/p/47550015

图形语法与一般的图表主要区别在于：图形语法只要修改下语法描述，就能得到完全不同的图形，而一般的图表需要增加图表类型。图形语法可描述的图形是近乎无限的，而图表类型是有限的。

举个例子（截取自：https://segmentfault.com/a/1190000041004457）：

如果我们基于图形语法绘制了柱状图

将语法中的坐标系换成极坐标后，会变成玫瑰图

语法中调整坐标度量，并增加不同颜色后，变成了更完善的玫瑰图

继续调整语法参数，最终可得到饼图

在这个例子中，如果用一般图表（如 ECharts），需要至少 4 个图表类型，图表数据的格式也可能存在区别。但使用图形语法描述，只需要调整不同的语法参数，就能得到不同的图形。

图形语法通过调整语法参数，得到不同的图形，给数据的表达提供了更大的空间，属于更专业的图表引擎，但同样也带来了较为复杂的语法规则。

基于图形语法，前端（JS 语法）常用的图表库：

• G2：蚂蚁金服基于图形语法的图表库，图形语法通过 js 语法使用

const ds = new DataSet();
const chart = new Chart({  ...});
...
const dv2 = ds.createView().source(dv1.rows);dv2.transform({  type: 'regression',  method: 'polynomial',  fields: ['year', 'death'],  bandwidth: 0.1,  as: ['year', 'death']});
const view2 = chart.createView();view2.axis(false);view2.data(dv2.rows);
...
chart.render();

• Vega：开源的图形语法框架，图形语法通过 json 配置使用

{  width : 500,  height : 200,  config : {    axis : {      grid : true,      gridColor :  #dedede     }  },  ...}

• ChartSpace：字节跳动基于图形语法的图表库，图形语法通过 json 配置使用，语法与 Vega 相近

{     type :  line ,     data : [],     labels : {         visible : false    },     axes : [        {             orient :  left         },        {             orient :  bottom         }    ],     xField :  x ,     yField :  y }

在跨端，跨语言的情况下，json 配置的语法拥有更好的多端一致性。后端保存一套相同的 json 配置，可以在多端绘制出相同的图形。

图表库 ChartSpace

ChartSpace 是字节数据平台基于图形语法的图表库，已支持 web/h5/mini program，现在要支持到 flutter 端。

业务上期望多端协同，同一份数据在不同端上有一致性的表现，以折线图为例：

方案

常规的方案是实现一套 flutter 版的图形语义，解析 chartspace 的语义配置，绘制成相同规格的图形。但这种方案带来的开发成本比较高，所以我们选择了另一套方案：跨端 canvas。

原理就是将 chartspace (js) 所使用的 web canvas 上绘制的内容，通过跨端技术给呈现到 flutter canvas 上来。

实现这个方案，要解决两个问题：

1. 把东西画出来

2. 把交互串起来

把东西画出来

核心思想：将 chartspace(js) 的 canvas 绘制指令执行从 js 转移到 flutter 执行，目标是对齐 Flutter Canvas 和 Web Canvas。

实现方式是：在 JS 中通过构造 Mock Canvas 对象，录制 canvas 指令，然后发送到 Flutter 侧，通过 Flutter Canvas 来实现这些指令。

主要工作量在于用 Flutter Canvas 实现一套 Web Canvas 的 API。

把交互串起来

用户交互的输入是 touch 事件，只需要将 Flutter PointerEvent 转换为 Web TouchEvent，输入到 chartspace 即可。

之后 chartspace 会产生新的 canvas 指令，在 Flutter Canvas 中绘制出新的内容，流程和首次渲染一样，至此交互就完整了。

效果

完成后效果如下，tooltip 的效果是手指点击后产生的。

取得的收益是：低成本实现，低成本维护，跨端一致性。

渲染性能对比：

开发期间做过很多优化，graph 渲染时间从 80ms 优化到 50ms，我们还在持续优化，争取做到接近原生的体验。后续我们其他小伙伴会分享优化的思路和实践。

跨端 Canvas 的数据是从用户输入开始，到渲染图形结束，包含了 bridge 传输，chartspace (js) 生成 canvas 指令的时间。

纯 Flutter 是将相同的 canvas 指令变成 Flutter 代码后的执行时间。

可以看到渲染性能与纯 Flutter 模式有一定差距，但也在可接受范围内，正常图表交互时，用户很难感知到区别。

我们相信，相同的图表如果自己绘制，应该能有更好的性能，在 canvas 的指令优化 和 Web Canvas API 的实现上，还有一定的优化空间。

踩坑 & 解决方案

实践过程中，遇到了很多问题，这里选取几类有代表性的分享一下

Canvas 生命周期不同

生命周期区别如下：

我们的解决方案是，保存渲染后的结果，在上一次的渲染结果上继续绘制

@override  void paint(Canvas canvas, Size size) {    final paintList = _repaint.consume();    ui.Picture picture = canvasRecorder.record(canvasId, size, _repaint.reverse, paintList);    if (picture != null) {      canvas.drawPicture(picture);    }  }

Canvas Context 不同

Context 区别如下：

针对第一个问题，save / restore 的内容不一致，我们创建了 WebCanvas 对象以模拟 Web 上的 Canvas，手动管理 save / restore 的内容

class WebCanvas {  ...    SaveStack saveStack = SaveStack();  SaveInfo get current => saveStack.current;    ...}

针对第二个问题，我们创建了 CanvasRecorder 对象，并在该对象中持有 WebCanvas 实例，与 Web 上的 Canvas 实例的生命周期保持一致

class CanvasRecorder {  ...
  CanvasHistory getCanvasHistory(String canvasId) {    if (!hisMap.containsKey(canvasId)) {      hisMap.putIfAbsent(canvasId, () => CanvasHistory(canvasId));    }    return hisMap[canvasId];  }    ...}class CanvasHistory {  ...    final ChartSpaceCanvas chartSpaceCanvas = ChartSpaceCanvas();    ...}class ChartSpaceCanvas {  ...
  final WebCanvas webcanvas = WebCanvas();    ...}

Canvas 默认值不同

Canvas 默认值不同的地方较多，我们直接按 Web Canvas 的标准设置了默认值，没有仔细统计过差异，粗略来说有以下属性有区别：

• transform

• fillStyle

• strokeStyle

• strokeMiterLimit

• font

以 transform 为例，transform 实际维护的是一个 4 * 4 的变换矩阵（DOMMatrix 对象），web 上 setTransform 方法设置的是变换矩阵不同位置的值

Flutter 上是直接操作这个变换矩阵

但是 Web Canvas 和 Flutter Canvas 的变换矩阵默认值不一致

所以解决方案如下：

class Matrix4Builder {  static Matrix4 webDefault() {    final matrix4 = Matrix4.zero();    matrix4.setEntry(0, 0, 1.0);    matrix4.setEntry(1, 1, 1.0);    matrix4.setEntry(2, 2, 1.0);    matrix4.setEntry(3, 3, 1.0);    return matrix4;  }}

Bridge 需要同步 API

我们通过 Mock CanvasRenderdingContext 对象，来达到录制 canvas 指令的目的，但是 CanvasRenderdingContext 对象上有很多方法需要同步 API，比较高频的比如 measureText。

但是常规的 Bridge 通信是

其中 Flutter 与 iOS/Android 的通信是异步的，所以这里使用 FFI 直接与 JS Runtime 通信才能保证同步

截取部分代码实现：

Pointer<Utf8> funcMeasureTextCString = Utf8.toUtf8('measureText');var measureTextFunctionObject = jSObjectMakeFunctionWithCallback(    _globalContext,    jSStringCreateWithUTF8CString(funcMeasureTextCString),    Pointer.fromFunction(measureTextFunction));jSObjectSetProperty(    _globalContext,    _globalObject,    jSStringCreateWithUTF8CString(funcMeasureTextCString),    measureTextFunctionObject,    jsObject.JSPropertyAttributes.kJSPropertyAttributeNone,    nullptr);free(funcMeasureTextCString);

总结 & 展望

总结一下，我们通过跨端 Canvas 的方式，低成本实现了 Flutter ChartSpace，实践下来取得了不错的性能表现。

这也得益于 ChartSpace 本身合理的架构设计，通过 json 配置来定义图形语义，能有效屏蔽不同平台，语言的差异。

由于 ChartSpace 是基于图形语义的实现，相比定制化的图表类型，需要更大的计算量，会影响渲染性能。但现在也支持了分步渲染，在大数据和复杂的图形下，能以渐进式的效果逐步呈现完整图形，对用户体验并没有损害。

Flutter ChartSpace 暂时还没支持分步渲染，当前的方案还有很大的优化空间，我们会继续探索。

未来考虑在两个方向上继续拓展：

设计易用性更高的 API

图形语法虽然很强大，也带来了使用上的复杂度，我们可以在图形语法上包装一层 API，将常用的图形给剥离出来，降低使用成本。

比如蚂蚁集团的 g2plot 就是在 g2 基础上的封装，提供了更简洁的语法，引用 g2plot 的一段描述

相关描述来自：https://zhuanlan.zhihu.com/p/339275513

const line = new Line('container', {  data,  xField: 'year',  yField: 'value',});
line.render();

大家可以对比下 g2plot 的语法示例和 g2 的语法示例，g2 的语法在文章的图形语法一节。

拓展更多的端/技术栈

实践下来后，我们发现，相同的技术可以拓展至更多的技术栈，比如：iOS/Android/RN

开源

ChartSpace 和 Flutter ChartSpace 都是字节内部的产品。ChartSpace 在大量的数据产品，和其他业务中不断打磨，经受了不同场景的考验，包括抖音的数据分析，现在已经有开源计划了。Flutter ChartSpace 也需要在内部场景打磨后，再考虑开源。

Flutter ChartSpace 会在 ChartSpace 之后开源，预期是今年年底。

🔥 火山引擎 APMPlus 应用性能监控是火山引擎应用开发套件 MARS 下的性能监控产品。我们通过先进的数据采集与监控技术，为企业提供全链路的应用性能监控服务，助力企业提升异常问题排查与解决的效率。目前我们面向中小企业特别推出「APMPlus 应用性能监控企业助力行动」，为中小企业提供应用性能监控免费资源包。现在申请，有机会获得 60 天免费性能监控服务，最高可享 6000 万条事件量。

👉 点击这里，立即申请