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
プラグインを追加する必要があります。
dependencies:
flutter:
sdk: flutter
charts_flutter: ^0.10.0
これで、iOSまたはAndroidシミュレーター、または選択したデバイスでこれを実行できます。
ステップ3—アプリケーションの足場
次に、コードエディタでmain.dart
を開きます。
このファイルのすべてを、home.dart
にあるHomePage
を指すMaterialApp
に置き換えます。
import 'package:flutter/material.dart';
import 'package:charts_flutter_example/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
次に、新しいhome.dart
ファイルを作成し、次のコード行を追加します。
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
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
ファイルを作成し、次のコード行を追加します。
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(
{
this.year,
this.subscribers,
this.barColor
}
);
}
これにより、year
およびsubscribers
のデータを表すことができます。
ステップ5—データの作成
このチュートリアルのために、データはHomePage
内にList<SubscriberSeries>
として作成されます。
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),
),
];
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
ファイルを作成し、次のコード行を追加します。
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({ this.data});
}
このコードは、SubscriberSeries
をprop
として取り込むSubscriberChart
という名前の新しいStatelessWidget
を作成します。
次に、このdata
を使用して、次のようにcharts.Series
を構築できます。
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({ this.data});
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
関数を更新して、チャートを返しましょう。
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({ this.data});
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
を使用するように変更します。
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 {
// ...
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トピックページで演習とプログラミングプロジェクトを確認してください。