千相千面图形语法

最新推荐文章于 2023-04-01 22:29:17 发布

entronad

最新推荐文章于 2023-04-01 22:29:17 发布

阅读量1k

点赞数

文章标签：前端 flutter 数据可视化 data visualization dart

本文链接： https://blog.csdn.net/entronad/article/details/121310077

版权

本文通过 Flutter 可视化库 Graphic，展示了如何利用图形语法将柱状图转换为饼图，解释了图形语法的声明式定义、数据变量、几何元素、坐标系、度量和具象属性等概念。通过对柱状图的演变，揭示了图形语法的灵活性和在数据可视化中的重要作用。

摘要由CSDN通过智能技术生成

在 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,
  ],
)