本エントリではfl_chartで曲線・折れ線グラフを作成する方法を以下の流れで説明する。

fl_chartとは

概要

fl_chartはFlutterでグラフを作成するためのパッケージ。 簡単にインタラクティブなグラフを作成することができる。

公式ページは以下。

pub.dev

作成可能なグラフ

2022年8月15日現在fl_chartを用いることで以下のグラフを作成することができる。

Line Chart (曲線・折れ線グラフ)

Bar Chart (棒グラフ)

Pie Chart (円グラフ)
pie chart
Scatter Chart (散布図)

Radar Chart (レーダーチャート)

またfl_chartのgithub リポジトリはドキュメントが充実しており、興味があればそちらも確認して欲しい。各クラスのパラメータについて詳細に記載されており大変参考になる。

github.com

曲線・折れ線グラフ作成方法

ここからfl_chartを用いた曲線・折れ線グラフの作成方法を説明する。

使用するクラス

グラフ作成に使用するクラスは以下。

LineChart

曲線・折れ線グラフ作成の大元のクラス。このクラスに各種設定を指定していく。

LineChartData

LineChartのデータとデザイン（座標範囲や背景色、軸ラベルの表示など）を扱うクラス。

LineChartBarData

LineChartで描画するための各データを扱うクラス。

例えば以下のように特定の地域の最高気温と最低気温のグラフを、同じ座標軸に描画した場合を考える。

この時LineChartBarDataに相当するのは各線グラフのデータ。つまり「平均気温のデータ」で一つのLineChartBarDataクラスとなる。

FlSpot

座標上の一つ一つのプロットを扱うクラス。メンバ変数はxとyのみなので直感的にもわかりやすい。

FlDotData

座標上のプロットのデザインを扱うクラス。

FlTitlesData

グラフの軸ラベルのデザイン、表示非表示の設定などを扱うクラス。

AxisTitles

グラフの各軸ラベルの詳細なデザインを扱うクラス。

SideTitles

グラフ各軸の目盛のデザインを扱うクラス。

グラフ化するデータ

本エントリでは「2021年の東京都の年間平均気温」をLine Chart (曲線・折れ線グラフ)を用いてグラフ化する。

データは気象庁が公開しているデータから引用した。

month	avg. temperature
1	5.4
2	8.5
3	12.8
4	15.1
5	19.6
6	22.7
7	25.9
8	27.4
9	22.3
10	18.2
11	13.7
12	7.9

fl_chartのインストール

fl_chartはサードパーティのパッケージなので、pubspec.yamlに以下の記述を追加してインストールを行う。

完成グラフ

作成するグラフの見た目は以下。

fl_chartで作成した曲線・折れ線グラフは、特に設定をしなくてもタップすることで値を表示してくれる機能が実装されている。

コード

解説

基本設定

LineChart()を線グラフを描画する位置に配置する。

LineChart()のプロパティにはLineChartData()を指定する。

グラフ最小値・最大値の設定

x軸、y軸それぞれでグラフの最小値・最大値を以下で指定している。

minX: 1,
maxX: 12,
minY: 0,
maxY: 30,

タイトル設定

グラフのラベルにtitlesDataプロパティを指定することで設定する。 titlesDataプロパティに指定している値は以下。

FlTitlesData(
     # グラフ上部ラベル
      topTitles: AxisTitles(
          axisNameWidget: Text(
            "2021 Tokyo Avg Temperature",
            style: _titleStyle,
          ),
          axisNameSize: 48),

    # グラフ右部ラベル
      rightTitles: AxisTitles(
          sideTitles: SideTitles(
        showTitles: false,
      )),

     # グラフ下部ラベル
      bottomTitles: AxisTitles(
        sideTitles: _bottomTitles(),
        axisNameWidget: Container(
          alignment: Alignment.centerRight,
          child: Text(
            "month",
            style: _labelStyle,
          ),
        ),
      ),

     # グラフ左部ラベル
      leftTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            getTitlesWidget: (value, meta) => Text(
              value.toInt().toString(),
              style: const TextStyle(
                fontSize: 12,
              ),
            ),
          ),
          axisNameWidget: Text(
            "temperature",
            style: _labelStyle,
          ),
          axisNameSize: 32),
    );

グラフ右部を非表示にするため、showTitlesプロパティをfalseに指定する。

データ設定

LineChartData()のlineBarsDataプロパティにList<LineChartBarData>のウィジェットを渡すことで設定する。

LineChartBarData(
  isCurved: true,
  color: Colors.red[400],
  barWidth: 4,
  dotData: FlDotData(show: true),
  
  # プロットデータ
  spots: const [
    FlSpot(1, 5.4),
    FlSpot(2, 8.5),
    FlSpot(3, 12.8),
    FlSpot(4, 15.1),
    FlSpot(5, 19.6),
    FlSpot(6, 22.7),
    FlSpot(7, 25.9),
    FlSpot(8, 27.4),
    FlSpot(9, 22.3),
    FlSpot(10, 18.2),
    FlSpot(11, 13.7),
    FlSpot(12, 7.9),
  ],
),

各プロット位置はspotsプロパティに渡すFlSpot()ウィジェットで指定する。第一引数がx、第二引数がyを表す。

プロットを表示する場合は

dotData: FlDotData(show: true),

と設定する。非表示にしたい場合はshowプロパティにfalseを指定する。

すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】fl_chartで曲線・折れ線グラフを作成する方法