Press "Enter" to skip to content

Graphic:基于图形语法的 Flutter 可视化库

本站内容均来自兴趣收集,如不慎侵害的您的相关权益,请留言告知,我们将尽快删除.谢谢.

本文介绍了一个基于图形语法(Grammar of Graphics)的 Flutter 可视化库: Grapphic

 

Repository

pub.dev

背景

 

数据可视化是应用开发中很常见但很重要的需求,一个好的可视化库能让数据可视化的开发事半功倍。可惜的是,目前在 Flutter 社区中,还没有一个完美的可视化库。目前的 Flutter 可视化库都存在一些不尽如人意的地方,例如:

charts_flutter 由 Google 内部开发,代码质量很高。但是它提供的图表种类很少,仅有最常见的线图、柱状图、饼图等几种,且没有曲线平滑等常用的功能。此外它似乎是一个实验性质的项目,没有任何的文档或介绍,虽然源代码放在了GitHub上,但明确表示不会处理任何 issue 和 PR,似乎也好久没有特性更新了。
fl_chart 是 pub.dev 上目前人气最高的可视化库,它有较为酷炫的设计和动画,是一位 伊朗帅哥 开发的。但是它的个人风格太明显了,不太适用于统计或严肃的场景。
syncfusion_flutter_charts 较为完善和专业,但它是一个闭源的商业软件,仅提供收费的使用许可,对于很多开发者来说并不适合。

为了构建复杂的可视化图表,我们做过 flutter_echarts ,通过 Webview 的方式将 Web 中的 Echarts 引入到 Flutter App 中,满足很多复杂的可视化需求,但是 Webview 在性能和兼容性等方面还是存在诸多问题,对于性能和稳定性要求高的图表,还是需要一个 Flutter 原生的可视化方案。

 

近年来,前端的数据可视化也有了长足的发展,图形语法(Grammar of Graphics)的理论逐渐被应用到了前端可视化库中。图形语法是 Leland Wilkinson 在其所着的《The Grammar of Graphics》一书中提出的理论,该理论是一套用来描述所有统计图形深层特性的语法规则。

基于图形语法的理念,可视化库就不用受到饼图、线图、柱状图这样传统分类的限制,将数据可视化抽象成不同的图形标记、坐标系、度量的组合,大大提升了可视化库的扩展性和灵活性。应用图形语法的前端可视化库有vega 系列、阿里的AntV 系列、微软的chart-part 等。

 

基于以上的背景,诞生了 Grapphic :一个基于图形语法的 Flutter 可视化库。

 

示例

 

一个简单的示例:

graphic.Chart(
  data: [
    { 'genre': 'Sports', 'sold': 275 },
    { 'genre': 'Strategy', 'sold': 115 },
    { 'genre': 'Action', 'sold': 120 },
    { 'genre': 'Shooter', 'sold': 350 },
    { 'genre': 'Other', 'sold': 150 },
  ],
  scales: {
    'genre': graphic.CatScale(
      accessor: (map) => map['genre'] as String,
    ),
    'sold': graphic.NumScale(
      accessor: (map) => map['sold'] as num,
      nice: true,
    )
  },
  geoms: [graphic.IntervalGeom(
    position: graphic.PositionAttr(field: 'genre*sold'),
    shape: graphic.ShapeAttr(values: [
      graphic.Shapes.rrectInterval(radius: Radius.circular(5))
    ]),
  )],
  axes: {
    'genre': graphic.Defaults.horizontalAxis,
    'sold': graphic.Defaults.verticalAxis,
  },
)

 

更多示例请参考 Example App

特性

 

图形语法

 

所谓数据可视化,可以粗略的概况为:将数据通过某种规则转换为对应图形的视觉通道属性(颜色、形状、大小、位置等),然后将具有这些属性的图形渲染出来。这一过程在图形语法中具体表现为:

在 Graphic 的实现上,接口和类名的设计主要参考了 AntV。核心概念如下:

Geom :几何标记,组成图表的几何图形
Coord :坐标系,图表的坐标系,目前有笛卡尔坐标系(Cartesian)和极坐标系(Polar)
Scale :度量,将数据缩放到 [0, 1] 的区间,以便映射到视觉通道属性
Attr :视觉通道属性,包括位置、颜色、形状、大小等,值由经过度量变换的数据决定,被应用到几何标记上

这些概念对于了解图形语法的人,特别是使用过 AntV 的人应该不陌生,如果没有接触过可以参考 AntV 的文档 。我们认为图形语法将会是未来数据可视化发展的大方向,不管现在是否使用相关的可视化库,图形语法都是值得学习了解的。

 

声明式图表

 

Web 生态中的大部分可视化库都是命令式的,绘制图表通过语句调用一系列函数实现,AntV 也不例外。但 Flutter 中推崇的是声明式、响应式的视图。通过 build 函数返回值中树状的参数结构配置视图的结构。值得一提的是这也是 Web Canvas 和 Flutter CustomPaint 组件的重要差别。

 

因此 Graphic 的接口设计也采用了声明式的,通过 graphic.Chart 组件的参数对所有信息进行配置,当视图的组件树更新时图表自动重新绘制。当然,后期会对重绘进行一些优化。

 

自定义 Shape

 

图表之所以分门别类、变化万千,最主要的就是形状这一属性的多样。因此在所有视觉通道中,形状也是最复杂的,形状的可定制化程度决定了可视化库的扩展性。

 

Graphic 中形状 Shape 这一属性的类型是函数或高阶函数,传入几何标记各视觉通道的属性值,组合出图形对象,供渲染引擎使用。用户可自己编写函数的实现,即自定义的 Shape。

 

List<graphic.RenderShape> triangleInterval(
  List<graphic.AttrValueRecord> attrValueRecords,
  graphic.CoordComponent coord,
  Offset origin,
) {
  // Implementation of attrValueRecords => renderShapes
}

 

展望

 

目前 Graphic 的开发主要完成了静态的图表。后续将添加交互、动画等特性,以及 Tooltip、legend 等附属组件。

 

特性和接口尚不稳定,欢迎试用,但应用到生产环境需谨慎。

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注