【Flutter/Dart】fl_chartでグラフUIの実装方法!折れ線/円/棒/散布図

この記事からわかること
- Flutter/DartのグラフUIの実装方法
- fl_chartパッケージの導入と使い方
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Xcode:16.0
- Flutter:3.29.2
- Dart:3.7.2
- fl_chart: 0.70.2
- Mac M1:Sonoma 14.6.1

fl_chartパッケージでグラフUI実装
Flutterで棒グラフや折れ線グラフ、円グラフなどを実装したい場合はfl_chart
パッケージが活用できます。fl_chart
では複数のグラフ表示やX軸/Y軸ラベルのカスタマイズ、アニメーションなど豊富な機能を簡単に実装することが可能です。
導入
Flutterでfl_chart
を利用できるようにするために以下のコマンドを実行してパッケージを導入します。
これでパッケージの導入が完了し、import
文を追加すれば使用できるようになります。
折れ線グラフの実装方法
fl_chart
では各グラフを実装するためのWidgetが用意されています。例えば折れ線グラフでいうとLineChart
というWidgetの中にLineChartData
、さらにその中にLineChartBarData
を配置し、実際のデータをFlSpot
で指定します。
それぞれの役割は以下のとおりです。
- LineChart・・・グラフ全体を表示するウィジェット
- LineChartData・・・グラフのデータ・デザインの設定(軸のラベル、グリッド線、境界線など)
- LineChartBarData・・・折れ線のデザインとデータ点を設定(線の色、太さ、曲線、データ (FlSpot))
- FlSpot・・・実際のデータ

全体コードで見ると以下のような感じです。
LineChartData(lineBarsData:[])
は配列でLineChartBarData
を指定できるので1つのグラフエリアの中に複数の折れ線グラフを表示させることなども可能になっています。
X軸・Y軸ラベルのカスタマイズ
グラフのX軸とY軸ラベルをカスタマイズしたい場合はLineChartData(titlesData)
からFlTitlesData
型で設定します。デフォルトでは上下左右全てにラベルが表示されており、それぞれtopTitles
やrightTitles
などからSideTitles
型でカスタマイズすることが可能になっています。
AxisTitles
AxisTitles
型からは軸ラベル名やラベル名の文字サイズ、軸に表示する値を制御するSideTitlesなどを変更できます。
SideTitles
SideTitles
型からはラベル自体の表示/非表示や値のフォーマットなどを変更できます。
棒グラフ
棒グラフを実装するにはBarChart
を使用します。BarChartData
の中にはBarChartGroupData
を複数配置することができ、BarChartGroupData
1つに複数のY値を指定することも可能になっています。

円グラフ
円グラフを実装するにはPieChart
を使用します。PieChartData
の中にはPieChartSectionData
を複数配置することができ、value
の値で円に占めるパーセンテージをコントロールします。

散布図
散布図を実装するにはScatterChart
を使用します。ScatterChartData
の中に実際の実データとなるScatterSpot
を指定します。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。