flutter_charts

Flutter 的图表库，用 Dart 和 Flutter 编写。

当前版本新增功能

当前版本 0.1.8。

请参阅 <CHANGELOG.md> 获取此版本的新功能和错误修复列表。

正如 CHANGELOG 中所述，两个最重要的功能是：

  • 使代码库兼容 Dart 2
  • 添加标签的“迭代自动布局”。

标签自动布局是一系列步骤，例如跳过某些标签、倾斜标签或减小标签字体，最终使标签“整洁”、“易读”，不溢出或互相重叠。

新“迭代自动布局”功能的插图

本节说明了当水平空间越来越小时，自动布局是如何工作的。

Flutter 图表库会自动检查 X 轴标签重叠情况，并按照基于规则的迭代重新布局，以防止标签互相重叠。

为了说明图表的“受限”水平空间，我们在图表右侧逐渐添加一个文本小部件，其中包含越来越多的“<”符号。

自动布局步骤 1

假设图表上有六个标签，并且有足够的空间水平显示标签。结果可能如下所示：

img

我们可以看到所有 X 轴标签都完整显示，呈水平方向。

自动布局步骤 2

接下来，通过右侧添加一个更宽的文本标签，例如“<<<<<<”，来减少可用空间。

img

我们可以看到标签已自动倾斜 ChartOptions labelTiltRadians 指定的角度，以便标签能够适应。

自动布局步骤 3

接下来，通过右侧添加一个更宽的文本标签，例如“<<<<<<<<<<<”，来进一步减少可用空间。

img

我们可以看到标签不仅倾斜了，而且还自动跳过了（每隔一个）以防止标签重叠。

自动布局步骤 4

接下来，通过右侧添加一个比步骤 3 更宽的文本标签，例如“<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<”，来进一步减少可用空间。

img

为了防止标签重叠，我们可以看到更多的标签被跳过，图表显示的是每 5 个标签。

自动布局步骤 5

最后，我们通过使用“<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<”来移除极大的水平空间。

img

在这里，我们可以看到“默认自动布局”最终失效，标签发生了重叠。此外，由于水平空间不足，图例也隐藏了。

如何将 flutter_charts 库包含到您的应用程序中

Flutter Charts 是一个为 Flutter 编写的 Flutter 图表库。目前支持柱状图和折线图。

该软件包已发布到 pub，可包含在您应用程序的 pubspec.yaml 中： https://pub.dartlang.org/packages/flutter_charts 上的“安装”选项卡包含有关如何将 flutter_charts 软件包包含到您的应用程序中的说明。

使用 flutter_charts 创建的图表 - 示例应用程序

flutter_charts 中有一个示例应用程序：example/lib/main.dart。它展示了如何将 Flutter Chart 包含到 Flutter 应用程序中。

您可以使用下面段落中的其中一种方法（6、7）来运行示例应用程序。

此应用程序也用作以下几段中展示多个示例图表的基础。

这里我们仅展示两个简单的示例输出：一个柱状图和一个折线图。

一个示例垂直条形图（柱状图）

img

一个示例点和折线图（折线图）

img

输出由半随机数据生成。您可以单击蓝色的“+”按钮，使用不同的行集重新运行图表。

使用此 flutter_charts 软件包的已知软件包、库和应用程序

  1. Michael R. Fairhurst 的语言阅读器应用程序 - 请参阅 https://github.com/MichaelRFairhurst/flutter-language-reader-app

Flutter Charts - 概述：数据、选项、类

在展示几个图表示例之前，请注意几点。

  • ChartData 类：允许定义数据 - X 标签、Y 值、（可选）Y 标签、每行数据（系列）的图例、每行数据（系列）的颜色。下面的列表提供了每个项目的摘要描述：
    • X 标签：ChartData.xLabels 允许定义 X 标签。设置 xLabels 是必需的，但客户端可以将其设置为空字符串。
    • Y 值：ChartData.dataRows 允许在行中定义 Y 值。假设：ChartData.dataRows 中每行数据的大小相同，并且每行数据的大小等于 ChartData.xLabels.size。
    • Y 标签（可选）：通常，Y 标签是从数据生成的。选项 ChartOptions.useUserProvidedYLabels（默认为true）会要求 flutter_charts 从数据生成 Y 标签。如果将此选项设置为false，则必须设置 ChartData.yLabels。允许任意数量的用户提供的 Y 标签。
    • 每行数据（每个系列）的图例：ChartData.dataRowsLegends 允许为 ChartData.dataRows 中的每行数据定义图例。假设：ChartData.dataRows.size == ChartData.dataRowsLegends.size。
    • 每行数据（每个系列）的颜色：ChartData.dataRowsColors 允许为 ChartData.dataRows 中的每行数据定义颜色。假设：ChartData.dataRows.size == ChartData.dataRowsColors.size。
  • ChartOptions 类：允许定义选项，通过使用其默认值，或将某些选项设置为非默认值。还有 LineChartOptions 和 VerticalBarChartOptions 类。
  • 支持随机生成的数据、颜色、标签：Flutter Charts 还提供了一个名为 RandomChartData 的类，用于生成随机数据。此类生成：
    • Y 值数据，
    • X 标签，
    • 系列颜色，
    • 系列图例
  • 目前 RandomChartData 的唯一目的是在下面的示例中使用。需要说明的是，RandomChartData 的 Y 值、系列颜色和系列图例并非完全随机 - 它们硬编码了一些可演示的标签、图例、颜色值和数据范围（数据在范围内随机）。

Flutter Charts - 示例：LineChart 和 VerticalBarChart。代码和生成的图表

Flutter Charts 代码允许定义以下数据元素：

*数据（Y 值）* 用户提供或随机
*X 轴标签* 用户提供或随机
*包括颜色的选项* 用户提供或随机
*数据行图例* 用户提供或随机
*Y 轴标签* 用户提供或数据生成

下面的示例展示了几种代码片段（用户提供或随机数据、标签、选项）及其生成的图表。

图表图像是通过将代码片段替换到 file:example/lib/main.dart 代码中获得的。

随机数据（Y 值）、随机 X 轴标签、随机颜色、随机数据行图例、数据生成的 Y 轴标签。

此示例表明数据生成的 Y 轴标签是默认设置。
Flutter Charts 支持相当智能生成的数据 Y 轴标签，包括处理负数。

defineOptionsAndData() 中的代码

void defineOptionsAndData() {
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new RandomChartData(useUserProvidedYLabels: _lineChartOptions.useUserProvidedYLabels);
}

结果折线图

img

结果垂直条形图

img

用户提供的数据（Y 值）、用户提供的 X 轴标签、随机颜色、用户提供的数据行图例、数据生成的 Y 轴标签，

defineOptionsAndData() 中的代码

void defineOptionsAndData() {
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new ChartData();
  _chartData.dataRowsLegends = [
    "Spring",
    "Summer",
    "Fall",
    "Winter"];
  _chartData.dataRows = [
    [10.0, 20.0,  5.0,  30.0,  5.0,  20.0, ],
    [30.0, 60.0, 16.0, 100.0, 12.0, 120.0, ],
    [25.0, 40.0, 20.0,  80.0, 12.0,  90.0, ],
    [12.0, 30.0, 18.0,  40.0, 10.0,  30.0, ],
  ];
  _chartData.xLabels =  ["Wolf", "Deer", "Owl", "Mouse", "Hawk", "Vole"];
  _chartData.assignDataRowsDefaultColors();
  // Note: ChartOptions.useUserProvidedYLabels default is still used (false);
}

结果折线图

img

结果垂直条形图

img

用户提供的数据（Y 值）、用户提供的 X 轴标签、随机颜色、用户提供的数据行图例、用户提供的 Y 轴标签

此示例展示了如何使用选项 useUserProvidedYLabels 以及数据到 Y 轴标签范围的缩放。

defineOptionsAndData() 中的代码

void defineOptionsAndData() {
  // This example shows user defined Y Labels.
  //   When setting Y labels by user, the dataRows value scale
  //   is irrelevant. User can use for example interval <0, 1>,
  //   <0, 10>, or any other, even negative ranges. Here we use <0-10>.
  //   The only thing that matters is  the relative values in the data Rows.

  // Note that current implementation sets
  // the minimum of dataRows range (1.0 in this example)
  // on the level of the first Y Label ("Ok" in this example),
  // and the maximum  of dataRows range (10.0 in this example)
  // on the level of the last Y Label ("High" in this example).
  // This is not desirable, we need to add a userProvidedYLabelsBoundaryMin/Max.
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new ChartData();
  _chartData.dataRowsLegends = [
    "Java",
    "Dart",
    "Python",
    "Newspeak"];
  _chartData.dataRows = [
    [9.0, 4.0,  3.0,  9.0, ],
    [7.0, 6.0,  7.0,  6.0, ],
    [4.0, 9.0,  6.0,  8.0, ],
    [3.0, 9.0, 10.0,  1.0, ],
  ];
  _chartData.xLabels =  ["Fast", "Readable", "Novel", "Use"];
  _chartData.dataRowsColors = [
    Colors.blue,
    Colors.yellow,
    Colors.green,
    Colors.amber,
  ];
  _lineChartOptions.useUserProvidedYLabels = true; // use the labels below on Y axis
  _chartData.yLabels = [
    "Ok",
    "Higher",
    "High",
  ];
}

结果折线图

img
（免责声明：并非实际测量）

结果垂直条形图：在此，Y 值应该是数字（如果有），因为手动标记“好”、“更高”、“高”对于堆积类型图表没有意义。

img
（免责声明：并非实际测量）

垂直条形图 - 另一个示例，显示正负堆栈

用户提供的数据（Y 值）、用户提供的 X 轴标签、用户提供的颜色、用户提供的数据行图例、用户提供的 Y 轴标签

此示例再次使用了用户定义的 Y 轴标签，并配以条形图，利用了用户定义的 Y 轴标签的智能自动布局。图表显示了与百分比下降/上升股票图类似的负值和正值。

defineOptionsAndData() 中的代码

void defineOptionsAndData() {
  // This example shows user defined Y Labels with
  // a bar chart, showing negative and positive values
  // similar to %down/%up stock charts.
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new ChartData();
  _chartData.dataRowsLegends = [
    "-2%_0%",
    "<-2%",
    "0%_+2%",
    ">+2%"];
  // each column absolute values should add to same number todo- 100 would make more sense, to represent 100% of stocks in each category
  _chartData.dataRows = [
    [-9.0, -8.0,  -8.0,  -5.0, -8.0, ],
    [-1.0, -2.0,  -4.0,  -1.0, -1.0, ],
    [7.0, 8.0,  7.0, 11.0, 9.0, ],
    [3.0, 2.0, 1.0,  3.0,  3.0, ],
  ];
  _chartData.xLabels =  ["Energy", "Health", "Finance", "Chips", "Oil"];
  _chartData.dataRowsColors = [
    Colors.grey,
    Colors.red,
    Colors.greenAccent,
    Colors.black,
  ];
  _lineChartOptions.useUserProvidedYLabels = false; // use labels below
  //_chartData.yLabels = [
  //  "Ok",
  //  "Higher",
  //  "High",
  //];
}

结果垂直条形图

img

（此处存在一个 bug，请参见已知 bug）

GitHub

https://github.com/mzimmerm/flutter_charts