如何使用charts flutter创建条形图

来自菜鸟教程
跳转至：导航、​搜索

介绍

charts_flutter 库是“用 Dart 原生编写的 Material Design 数据可视化库”。 您可以在 Flutter 应用程序中使用此库将数据显示为条形图、折线图、散点图、饼图等。

在本文中，您将使用 2008 年至 2015 年期间的魔兽世界订户数量数据，并使用 charts_flutter 将其显示为条形图。

先决条件

要完成本教程，您需要：

  • 下载并安装 Flutter。
  • 下载并安装Android Studio 或 Visual Studio Code。
  • 建议为您的代码编辑器安装插件： 为 Android Studio 安装了 Flutter 和 Dart 插件。 为 Visual Studio Code 安装了 Flutter 扩展。

本教程已使用 Flutter v1.22.2、Android SDK v31.0.2 和 Android Studio v4.1 进行了验证。

第 1 步 — 设置项目

为 Flutter 设置好环境后，您可以运行以下命令来创建新应用程序： 

flutter create charts_flutter_example

导航到新的项目目录： 

cd charts_flutter_example

使用 flutter create 将生成一个演示应用程序，该应用程序将显示按钮被单击的次数。

第 2 步 — 添加 charts_flutter 插件

接下来，我们需要在 pubspec.yaml 中添加 charts_flutter 插件：

发布规范.yaml 

dependencies:
  flutter:
    sdk: flutter

  charts_flutter: ^0.10.0

我们现在可以继续在您选择的 iOS 或 Android 模拟器或设备上运行它。

第三步——搭建应用程序

现在，在您的代码编辑器中打开 main.dart。

用指向 HomePage 的 MaterialApp 替换此文件中的所有内容，该 home.dart 可以找到：

lib/main.dart 

import 'package:flutter/material.dart';
import 'package:charts_flutter_example/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

接下来，创建一个新的 home.dart 文件并添加以下代码行：

lib/home.dart 

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
        child: Text("charts_flutter_example"),
      ),
    );
  }
}

现在我们已经建立了一个基础应用程序，我们可以继续为我们的条形图数据创建模型。

第 4 步 - 构建订阅者模型

我们的条形图将专注于显示特定年份的魔兽世界订户数量。

接下来，创建一个新的 subscriber_series.dart 文件并添加以下代码行：

lib/subscriber_series.dart 

import 'package:flutter/foundation.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class SubscriberSeries {
  final String year;
  final int subscribers;
  final charts.Color barColor;

  SubscriberSeries(
    {
      @required this.year,
      @required this.subscribers,
      @required this.barColor
    }
  );
}

这使我们可以表示 year 和 subscribers 的数据。

第 5 步 — 创建数据

在本教程中，数据将在 HomePage 内部创建为 List<SubscriberSeries>：

重新访问 home.dart 并添加以下代码行：

lib/home.dart 

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_flutter_example/subscriber_series.dart';

class HomePage extends StatelessWidget {
  final List<SubscriberSeries> data = [
    SubscriberSeries(
      year: "2008",
      subscribers: 10000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2009",
      subscribers: 11000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2010",
      subscribers: 12000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2011",
      subscribers: 10000000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2012",
      subscribers: 8500000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2013",
      subscribers: 7700000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2014",
      subscribers: 7600000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    SubscriberSeries(
      year: "2015",
      subscribers: 5500000,
      barColor: charts.ColorUtil.fromDartColor(Colors.red),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
        child: Text("charts_flutter_example"),
      ),
    );
  }
}

现在我们已经有了数据，我们需要做的就是创建条形图！

第 6 步 - 创建条形图

现在，创建一个新的 subscriber_chart.dart 文件并添加以下代码行：

lib/subscriber_chart.dart 

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_flutter_example/subscriber_series.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});
}

此代码创建一个名为 SubscriberChart 的新 StatelessWidget，它将 SubscriberSeries 作为 prop 接收。

然后我们可以使用这个 data 来构建我们的 charts.Series，如下所示：

lib/subscriber_chart.dart 

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_flutter_example/subscriber_series.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});

  @override
  Widget build(BuildContext context) {
    List<charts.Series<SubscriberSeries, String>> series = [
      charts.Series(
        id: "Subscribers",
        data: data,
        domainFn: (SubscriberSeries series, _) => series.year,
        measureFn: (SubscriberSeries series, _) => series.subscribers,
        colorFn: (SubscriberSeries series, _) => series.barColor
      )
    ];
  }
}

domainFn 和 measureFn 用于比较 year 的 subscribers 数据。

我们还使用 colorFn 来潜在地传递 barColor。

回想一下 home.dart 是如何使用 barColor 的： 

SubscriberSeries(
  year: "2008",
  subscribers: 10000000,
  barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),

我们可能希望在生产应用程序中将 barColor 设为可选，默认为 Colors.blue（或您选择的颜色）。 在本教程中，一个条将被涂成红色，而其他条将被涂成蓝色。

让我们更新 build 函数以返回我们的图表：

lib/subscriber_chart.dart 

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_flutter_example/subscriber_series.dart';

class SubscriberChart extends StatelessWidget {
  final List<SubscriberSeries> data;

  SubscriberChart({@required this.data});

  @override
  Widget build(BuildContext context) {
    List<charts.Series<SubscriberSeries, String>> series = [
      charts.Series(
        id: "Subscribers",
        data: data,
        domainFn: (SubscriberSeries series, _) => series.year,
        measureFn: (SubscriberSeries series, _) => series.subscribers,
        colorFn: (SubscriberSeries series, _) => series.barColor
      )
    ];

    return Container(
      height: 400,
      padding: EdgeInsets.all(20),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text(
                "World of Warcraft Subscribers by Year",
                style: Theme.of(context).textTheme.body2,
              ),
              Expanded(
                child: charts.BarChart(series, animate: true),
              )
            ],
          ),
        ),
      ),
    );
  }
}

这段代码通过用 Card 将标记添加到 charts.BarChart。

需要注意的关键是我们将 series 作为 required 参数传递给 charts.BarChart： 

charts.BarChart(series, animate: true)

此时，您的数据和图表就可以使用了。

第 7 步 — 显示图表

最后，在代码编辑器中重新访问 home.dart 并将 build 更改为使用 SubscriberChart：

lib/home.dart 

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_flutter_example/subscriber_series.dart';
import 'package:charts_flutter_example/subscriber_chart.dart';

class HomePage extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("World of Warcraft Subscribers"),
      ),
      body: Center(
        child: SubscriberChart(
          data: data,
        )
      ),
    );
  }
}

保存更改并在模拟器中运行应用程序：

您的应用程序现在使用 charts_flutter 将数据显示为条形图。

结论

在本文中，您使用了 2008 年至 2015 年间《魔兽世界》订户数量的数据，并使用 charts_flutter 将其显示为条形图。

如果您想了解有关 Flutter 的更多信息，请查看 我们的 Flutter 主题页面 以获取练习和编程项目。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用charts_flutter创建条形图&oldid=25888”
Powered by MediaWiki