すらぼうの開発ノート

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

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

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



fl_chartとは

概要

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

公式ページは以下。

pub.dev

作成可能なグラフ

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

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

line chart

  • Bar Chart (棒グラフ)

bar chart

  • Pie Chart (円グラフ)

    pie chart

  • Scatter Chart (散布図)

scatter chart

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

radar chart

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

github.com

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

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

使用するクラス

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

LineChart

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

LineChartData

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

LineChartBarData

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

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

気温グラフの例

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

FlSpot

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

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を指定する。