Flutterは、Googleによって作成されたオープンソースのアプリ開発フレームワークです。Flutterには、グラフを描画するための多くのパッケージがありますが、今回はその中でも特に人気のあるfl_chartパッケージを使って、折れ線グラフの書き方を紹介します。
この記事の対象者
- Flutterのアプリ開発に興味がある人
- Flutterで簡単にグラフを描画したい人
- fl_chartパッケージの使い方を知りたい人
目次
- fl_chartの特徴
- fl_chartパッケージのインストール
- 完成図
- サンプルコード(折れ線グラフの描画)
- サンプルコードの解説
- まとめ
1.fl_chartの特徴
fl_chartの特徴には以下の様なものがあります。
- カスタマイズ性が高い：fl_chartパッケージは、グラフの様々な要素をカスタマイズできるように設計されています。例えば、グラフのラインカラー、フォント、軸のラベルなどをカスタマイズできます。
- アニメーションが豊富：fl_chartパッケージは、グラフのアニメーションもサポートしています。例えば、グラフの描画やズーム、スクロールなどをアニメーションで表現することができます。
- 多様なグラフタイプをサポート：fl_chartパッケージは、折れ線グラフだけでなく、棒グラフ、パイチャート、散布図、バブルチャートなど、様々な種類のグラフを描画することができます。
以上が、fl_chartパッケージの特徴です。Flutterアプリ開発でグラフを描画する際には、fl_chartパッケージを活用することをおすすめします。
2.fl_chartパッケージのインストール
fl_chartパッケージを使用するには、pubspec.yamlファイルに以下の依存関係を追加する必要があります。
dependencies:
fl_chart: ^0.35.0
依存関係を追加したら、ターミナルで以下のコマンドを実行して、パッケージを取得してください。
flutter pub get
3.完成図
fl_chartパッケージを使用して、折れ線グラフを描画する方法を紹介します。
こちらが今回作成したグラフです。LineChartDataクラスのisCurvedプロパティを変える事で折れ線だけでなく曲線も実装可能です。
4.サンプルコード(折れ線グラフの描画)
実際のコードです。
import 'package:fl_chart/fl_chart.dart';
ineChartData sampleData() {
return LineChartData(
lineTouchData: LineTouchData(enabled: false),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 0),
FlSpot(1, 5),
FlSpot(2, 10),
FlSpot(3, 5),
FlSpot(4, 20),
FlSpot(5, 15),
FlSpot(6, 25),
FlSpot(7, 10),
FlSpot(8, 15),
FlSpot(9, 25),
FlSpot(10, 28),
FlSpot(11, 15),
],
isCurved: true,
colors: gradientColors,
barWidth: 5,
),
],
minY: 0,
maxY: 30,
titlesData: LineTitles.getTitleData(),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
getDrawingVerticalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
);
}
List<Color> gradientColors = [
const Color(0xff23b6e6),
const Color(0xff02d39a),
];
class LineTitles {
static getTitleData() {
return FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 22,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return 'Jan';
case 1:
return 'Feb';
case 2:
return 'Mar';
case 3:
return 'Apr';
case 4:
return 'May';
case 5:
return 'Jun';
case 6:
return 'Jul';
case 7:
return 'Aug';
case 8:
return 'Sep';
case 9:
return 'Oct';
case 10:
return 'Nov';
case 11:
return 'Dec';
}
return '';
},
margin: 4,
),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '0';
case 10:
return '10';
case 20:
return '20';
case 30:
return '30';
}
return '';
},
reservedSize: 28,
margin: 12,
),
);
}
}
class LineChartSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LineChart(
sampleData(),
);
}
}
このサンプルコードは、fl_chartパッケージを使用して、折れ線グラフを描画するためのものです。上記のコードをコピーして、自分のアプリに適用することができます。
5.サンプルコードの解説
サンプルコードに登場する代表的なクラスと、それに対応する主なpropを紹介します
LineChartData
LineChartDataクラスは、折れ線グラフのデータを保持するためのクラスです。主なpropを説明します。
-
lineTouchData: タッチの有効化/無効化を制御するためのLineTouchDataオブジェクトです。 -
lineBarsData: グラフの折れ線を保持するLineChartBarDataのリストです。 -
minY: Y軸の最小値です。 -
titlesData: グラフのタイトルを保持するFlTitlesDataオブジェクトです。 -
gridData: グラフのグリッドを保持するFlGridDataオブジェクトです。
LineChartBarData
LineChartBarDataクラスは、折れ線グラフの1つの線を表します。主なpropを説明します。
-
spots: データポイントのリストです。 -
isCurved: グラフの曲線を制御するブール値です。 -
colors: グラフの色のリストです。 -
barWidth: グラフの幅です。 -
belowBarData: 折れ線グラフの下部に表示されるデータを操作するBelowBarDataオブジェクトです。
FlTitlesData
FlTitlesDataクラスは、グラフのタイトルを保持するためのクラスです。主なpropを説明します。
-
bottomTitles: X軸のタイトルを管理するSideTitlesオブジェクトです。 -
leftTitles: Y軸のタイトルを管理するSideTitlesオブジェクトです。
FlGridData
FlGridDataクラスは、グラフのグリッドを保持するためのクラスです。主なpropを説明します。
-
show: グリッドの有効化/無効化を制御するブール値です。 -
drawHorizontalLine: 水平線の描画を制御するブール値です。 -
getDrawingVerticalLine: 垂直線を描画するためのFlLineオブジェクトを取得するコールバック関数です。 -
getDrawingHorizontalLine: 水平線を描画するためのFlLineオブジェクトを取得するコールバック関数です。
まとめ
fl_chartパッケージは、Flutterアプリ開発でグラフを描画する際に非常に便利なパッケージです。この記事では、fl_chartパッケージを使用して折れ線グラフを描画する方法について説明しました。これを参考に、自分のアプリにグラフを描画してみてください。
さらに詳しい書き方については公式ドキュメントを参考にしてください
https://pub.dev/packages/fl_chart
https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/line_chart.md