Charts flutterを使用して棒グラフを作成する方法

序章

charts_flutter ライブラリは、「Dartでネイティブに作成されたマテリアルデザインデータ視覚化ライブラリ」です。 Flutterアプリケーションでこのライブラリを使用して、データを棒グラフ、折れ線グラフ、散布図グラフ、円グラフなどとして表示できます。

この記事では、2008年から2015年までのWorld of Warcraftの加入者数のデータを使用し、charts_flutterを使用して棒グラフとして表示します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Flutterをダウンロードしてインストールします。
• Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
• コードエディタ用のプラグインをインストールすることをお勧めします。 AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。

このチュートリアルは、Flutter v1.22.2、Android SDK v31.0.2、およびAndroidStudiov4.1で検証されました。

ステップ1—プロジェクトの設定

Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

flutter create charts_flutter_example

新しいプロジェクトディレクトリに移動します。

cd charts_flutter_example

flutter createを使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。

ステップ2—charts_flutterプラグインを追加する

次に、pubspec.yaml内にcharts_flutterプラグインを追加する必要があります。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  charts_flutter: ^0.10.0

これで、iOSまたはAndroidシミュレーター、または選択したデバイスでこれを実行できます。

ステップ3—アプリケーションの足場

次に、コードエディタでmain.dartを開きます。

このファイルのすべてを、home.dartにあるHomePageを指すMaterialAppに置き換えます。

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—サブスクライバーモデルの構築

私たちの棒グラフは、特定の年のWorldofWarcraftのサブスクライバーの数を示すことに焦点を当てます。

次に、新しい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});
}

このコードは、SubscriberSeriesをpropとして取り込むSubscriberChartという名前の新しいStatelessWidgetを作成します。

次に、この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（または選択した色）にすることができます。 このチュートリアルでは、1つのバーが赤に、他のバーが青に色付けされます。

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年までのWorld of Warcraftの加入者数のデータを使用し、charts_flutterを使用して棒グラフとして表示しました。

Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。