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

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

この記事からわかること

  • Flutter/DartグラフUI実装方法
  • fl_chartパッケージの導入使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

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

fl_chartパッケージでグラフUI実装

Flutterで棒グラフや折れ線グラフ、円グラフなどを実装したい場合はfl_chartパッケージが活用できます。fl_chartでは複数のグラフ表示やX軸/Y軸ラベルのカスタマイズ、アニメーションなど豊富な機能を簡単に実装することが可能です。

導入

pub.dev:fl_chart

Flutterでfl_chartを利用できるようにするために以下のコマンドを実行してパッケージを導入します。

$ flutter pub add fl_chart

これでパッケージの導入が完了し、import文を追加すれば使用できるようになります。

import 'package:fl_chart/fl_chart.dart';

折れ線グラフの実装方法

fl_chartでは各グラフを実装するためのWidgetが用意されています。例えば折れ線グラフでいうとLineChartというWidgetの中にLineChartData、さらにその中にLineChartBarDataを配置し、実際のデータをFlSpotで指定します。

LineChart(LineChartData(lineBarsData: [LineChartBarData(spots: [FlSpot])]))

それぞれの役割は以下のとおりです。

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

全体コードで見ると以下のような感じです。

class ChartView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: 300,
          // ここからがグラフの実装
          child: LineChart(
            LineChartData(
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    FlSpot(0, 1),
                    FlSpot(1, 3),
                    FlSpot(2, 2),
                    FlSpot(3, 5),
                  ],
                  // 線を滑らかにする
                  isCurved: true, 
                  // 線の太さ
                  barWidth: 3, 
                   // 線の色
                  color: Colors.blueGrey,
                ),
              ],
            ),
          ),
        ),
      )
    );
  }
}

LineChartData(lineBarsData:[])は配列でLineChartBarDataを指定できるので1つのグラフエリアの中に複数の折れ線グラフを表示させることなども可能になっています。

X軸・Y軸ラベルのカスタマイズ

グラフのX軸とY軸ラベルをカスタマイズしたい場合はLineChartData(titlesData)からFlTitlesData型で設定します。デフォルトでは上下左右全てにラベルが表示されており、それぞれtopTitlesrightTitlesなどからSideTitles型でカスタマイズすることが可能になっています。

LineChartData(
  titlesData: FlTitlesData(
    // 上ラベル
    topTitles: AxisTitles(
      sideTitles: SideTitles(
        // 非表示
        showTitles: false, 
      ),
    ),
    // 右ラベル   
    rightTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: false,
      ),
    ),
    // 左ラベル   
    leftTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: false,
      ),
    ),
    // 下ラベル   
    bottomTitles: AxisTitles(
      sideTitles: SideTitles(
        showTitles: true,
        getTitlesWidget: (value, meta) {
          return Text("2025/${value.toInt() + 1}");
        },
      ),
    ),
      lineBarsData: []
  )
)

AxisTitles

AxisTitles型からは軸ラベル名やラベル名の文字サイズ、軸に表示する値を制御するSideTitlesなどを変更できます。

const AxisTitles({
    this.axisNameWidget,
    this.axisNameSize = 16,
    this.sideTitles = const SideTitles(),
    this.drawBelowEverything = true,
  });

SideTitles

SideTitles型からはラベル自体の表示/非表示や値のフォーマットなどを変更できます。

const SideTitles({
  this.showTitles = false,  // 軸のラベルを表示するか
  this.getTitlesWidget = defaultGetTitle, // ラベルの表示方法をカスタマイズ
  this.reservedSize = 22, // ラベルの領域(高さ・幅)
  this.interval, // ラベルの間隔 (目盛りの間隔)
  this.minIncluded = true, // 最小値 (Y軸の一番下) を含むか
  this.maxIncluded = true, // 最大値 (Y軸の一番上) を含むか
})

棒グラフ

棒グラフを実装するにはBarChartを使用します。BarChartDataの中にはBarChartGroupDataを複数配置することができ、BarChartGroupData1つに複数のY値を指定することも可能になっています。

fl_chartでグラフUIの実装方法!折れ線/円/棒/散布図
BarChart(
  BarChartData(
    barGroups: [
      BarChartGroupData(
        x: 0,
        barRods: [BarChartRodData(toY: 2, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 1,
        barRods: [BarChartRodData(toY: 5, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 2,
        barRods: [BarChartRodData(toY: 7, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 3,
        barRods: [
          BarChartRodData(toY: 8, color: Colors.green),
          BarChartRodData(toY: 4, color: Colors.green),
          BarChartRodData(toY: 2, color: Colors.green),
        ],
      ),
    ],
  ),
)

円グラフ

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

fl_chartでグラフUIの実装方法!折れ線/円/棒/散布図
PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(
        value: 40,
        color: Colors.blue,
        title: "40%",
      ),
      PieChartSectionData(
        value: 30,
        color: Colors.green,
        title: "30%",
      ),
      PieChartSectionData(value: 30, color: Colors.red, title: "30%"),
    ],
  ),
)

散布図

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

fl_chartでグラフUIの実装方法!折れ線/円/棒/散布図
ScatterChart(
  ScatterChartData(
    scatterSpots: [
      ScatterSpot(1, 3),
      ScatterSpot(2, 5),
      ScatterSpot(3, 4),
      ScatterSpot(4, 2),
      ScatterSpot(5, 5),
      ScatterSpot(6, 7),
      ScatterSpot(7, 1),
    ],
  ),
)

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

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index