千相千面图形语法

在 Flutter 可视化库 Graphic 的新版本中，优化了声明式定义的语法，使其更好的体现图形语法的本质。

 

本文通过 Graphic 的图形语法定义变换，一步步将柱状图演变为饼图，展示图形语法的灵活丰富。同时也让初学者了解图形语法基本概念。

如果你从未接触过图形语法，不影响本文的阅读。本文可以看作 Graphic 的入门教程。

柱状图和饼图都是数据可视化中常见的类型，它们乍一看迥异，但在图形语法中，却有着相同的本质，这是为什么？让我们从柱状图一步步变换成饼图，来了解其中的缘由。

首先从最常见的柱状图开始说起。数据采用和 ECharts 的入门示例 一样：

const data = [
  {'category': 'Shirts', 'sales': 5},
  {'category': 'Cardigans', 'sales': 20},
  {'category': 'Chiffons', 'sales': 36},
  {'category': 'Pants', 'sales': 10},
  {'category': 'Heels', 'sales': 10},
  {'category': 'Socks', 'sales': 20},
];

声明式定义

Graphic 采用声明式定义，所有的可视化语法都在图表组件 Chart 的构造函数中体现：

Chart(
  data: data,
  variables: {
    'category': Variable(
      accessor: (Map map) => map['category'] as String,
    ),
    'sales': Variable(
      accessor: (Map map) => map['sales'] as num,
    ),
  },
  elements: [IntervalElement()],
  axes: [
    Defaults.horizontalAxis,
    Defaults.verticalAxis,
  ],
)

数据与变量

图表的数据通过 data 字段引入，可以是任意类型的数组。在图表的内部，这些数据项将被转换成标准的 Tuple 类型。数据项如何转换为 Tuple 中的字段值则由变量（Variable）定义。

从代码可以看出，定义的语法是很简短的，但 variables 却占据了一半篇幅。Dart 是一种类型严格的语言，为了能允许任意类型输入数据，详细的 Variable 定义是必不可少的。

几何元素

图形语法最重要的特点是区分了抽象的数据图（Graph）和具体的图形（Graphic）。

比如，数据描述的是一段区间（Interval）还是一个单独的点（Point），这称之为 Graph；而在图上是表现为长条还是三角，多高多宽，这称之为 Graphic。生成 Graph 和 Graphic 的环节分别被称之为几何（Geometry）和具象（Aesthetic）。

Graph 和 Graphic 的概念，触达了数据与图形之间的本质关系，是图形语法跳出了传统图表分类束缚的关键。

而承载这两者定义称为几何元素（GeomElement）。它的类型决定了 Graph，分为：

• P