Flutter ChartSpace:通过跨端 Canvas 实现图表库

1,675 阅读9分钟

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

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

背景

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

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

图形语法

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

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

举个例子(截取自:segmentfault.com/a/119000004…

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

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

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

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

在这个例子中,如果用一般图表(如 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 上来。

image.png

实现这个方案,要解决两个问题:

  1. 把东西画出来
  1. 把交互串起来

把东西画出来

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

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

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

image.png

把交互串起来

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

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

image.png

效果

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

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

渲染性能对比:

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

跨端 Canvas纯 Flutter
graph 渲染52ms20ms
tooltip 渲染9ms0ms

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

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

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

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

踩坑 & 解决方案

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

Canvas 生命周期不同

生命周期区别如下:

Flutter CanvasWeb 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 区别如下:

Flutter CanvasWeb Canvas
canvas.save 保存的内容:Saves a copy of the current transform and clip on the save stack.ctx.save 保存的内容:
每次 paint 都是全新的 canvas 实例canvas 创建后,实例不变

针对第一个问题,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 的变换矩阵默认值不一致

Flutter CanvasWeb Canvas
0 0 0 00 0 0 00 0 0 00 0 0 01 0 0 00 1 0 00 0 1 00 0 0 1

所以解决方案如下:

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 通信是

image.png

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

image.png

截取部分代码实现:

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 的一段描述

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

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

line.render();

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

拓展更多的端/技术栈

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

image.png

开源

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

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


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

👉 点击这里,立即申请