「Flutterアプリで折れ線グラフを表示したい」
こんな時に便利なのがfl_chartパッケージの LineChart ウィジェットです。
fl_chartパッケージには様々なグラフを描画できるウィジェットが備わっており、その中のLineChartを使用することで折れ線グラフ(曲線グラフ)を実装できます。
それではLineChartの基本的な使い方とカスタマイズ方法について解説していきます！
パッケージのインストール
まずはfl_chartパッケージをFlutterプロジェクトにインストールします。
ターミナルで次のコマンドを実行してpubspec.yamlファイルにfl_chartを追加します。
flutter pub add fl_chart次にfl_chartを使用するdartファイルに次のコードをコピペします。
import 'package:fl_chart/fl_chart.dart';
基本的な使い方
LineChartの基本的な使い方について解説します。
LineChartの基本となる折れ線グラフは次のように実装します。spotsプロパティにFlSpotウィジェットの配列を渡していますが、このFlSpotは折れ線グラフを構成するための座標を示すウィジェットになります。
FlSpotの第一引数にx軸の座標、第二引数にはy軸の座標を渡します。
LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 8),
FlSpot(1, 9),
FlSpot(2, 7),
FlSpot(3, 10),
FlSpot(4, 9),
FlSpot(5, 11),
FlSpot(6, 10),
],
)
],
),
),画像のサンプルコード
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 8),
FlSpot(1, 9),
FlSpot(2, 7),
FlSpot(3, 10),
FlSpot(4, 9),
FlSpot(5, 11),
FlSpot(6, 10),
],
)
],
),
),
),
);
}
}
カスタマイズ方法
続いてLineChartのカスタマイズ方法について解説します。
グラフ周囲のタイトル(目盛)を非表示
LineChartのグラフ周りに表示されているタイトル(目盛)を非表示するにはLineChartDataのtitlesDataプロパティで設定できます。
サイド別に非表示にするには次のようにSideTitlesのshowTitlesプロパティをfalseにします。
LineChart(
LineChartData(
titlesData: FlTitlesData(
topTitles:AxisTitles(sideTitles: SideTitles(showTitles: false)), //上のタイトルを非表示
rightTitles:AxisTitles(sideTitles: SideTitles(showTitles: false)), //右のタイトルを非表示
),
lineBarsData: [...]
),
),
全方向のタイトルを一括で非表示にするにはFlTitlesDataのshowプロパティをfalseにします。
LineChart(
LineChartData(
titlesData: FlTitlesData(
show: false,
),
lineBarsData: [...]
),
),
背景色
折れ線グラフの背景色はLineChartDataのbackgroundColorプロパティで設定できます。
LineChart(
LineChartData(
backgroundColor: Colors.black,
lineBarsData: [...]
),
),
y軸の最大値と最小値を指定
折れ線グラフの目盛りの最大値と最小値はLineChartDataで設定できます。
LineChartDataのminYプロパティでy軸の最小値、maxYプロパティでy軸の最大値を設定できます。(x軸の場合はminXとmaxX)
minYやmaxYを設定していないとFlSpotのデータの最大値と最小値が目盛りに使用されます。
LineChart(
LineChartData(
minY: 5,
maxY: 14,
lineBarsData: [...],
),
),
曲線グラフにする
折れ線グラフを曲線グラフにするにはLineChartBarDataのisCurvedプロパティをtrueにします。
LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [...],
isCurved: true,
)
],
),
),
まとめ
今回はLineChartの基本的な使い方とカスタマイズ方法について解説しました。
fl_chartパッケージのLineChartを使用することで折れ線グラフ(曲線グラフ)を実装できるのでぜひ使ってみてください。