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

基于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 配