Udemyセール開催中! 対象コースが1,220円から

【Flutter】fl_chartの使い方|折れ線グラフをLineCartで作る

今回は外部パッケージ「fl_chart」の「LineCart」を使用して折れ線グラフを作成する方法を紹介します。

目次

「fl_chart」の導入

$ flutter pub add fl_chart
$ flutter pub get

pubspec.yamlにパッケージを追加・更新

import 'package:fl_chart/fl_chart.dart';

dartファイルにコピペ

LineChartの使い方

折れ線グラフのx軸・y軸・データを指定

LineChartのlineBarsDataプロパティで、LineChartDataを使用して折れ線グラフのx軸・y軸の範囲と折れ線グラフのデータを指定します。(下記コード参照)

//ソース
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: LineChart(
            LineChartData(
              minX: 0, //x軸最小値
              maxX: 5, //x軸最大値
              minY: 0, //y軸最小値
              maxY: 10, //y軸最大値
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    FlSpot(0, 6),
                    FlSpot(1, 6),
                    FlSpot(2, 9),
                    FlSpot(3, 15),
                    FlSpot(4, 19),
                    FlSpot(5, 22),
                    FlSpot(6, 26),
                    FlSpot(7, 27),
                    FlSpot(8, 24),
                    FlSpot(9, 18),
                    FlSpot(10, 13),
                    FlSpot(11, 8),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

軸の表示・非表示 & 目盛のラベルを指定

getTextStylesなし
getTextStylesあり&Scaffoldで背景色指定

LinChartDataでx軸・y軸の範囲・データを指定すると各軸の両側で目盛が表示され、小刻みにラベルが表示されてしまうので、LineChartDataのtitlesDataプロパティでFlTitlesDataを使用して軸の表示・ラベルを指定します。

下側のx軸目盛を指定するにはbottomTitlesプロパティ、左側のy軸目盛を指定するにはleftTitlesプロパティを使用します。

//ソース(右画像)
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: LineChart(
            LineChartData(
              minX: 0,
              maxX: 11,
              minY: -10,
              maxY: 35,
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    //省略
                  ],
                ),
              ],
              titlesData: FlTitlesData(
                show: true, //「true」で軸の目盛を表示
                bottomTitles: SideTitles(
                  showTitles: true,
                  getTextStyles: (context, value) => const TextStyle(
                    color: Colors.white,
                  ),
                  getTitles: (value) {
                    switch (value.toInt()) {
                      case 2:
                        return '3月';
                      case 5:
                        return '6月';
                      case 8:
                        return '9月';
                      case 11:
                        return '12月';
                    }
                    return '';
                  },
                ),
                leftTitles: SideTitles(
                  showTitles: true,
                  getTextStyles: (context, value) => const TextStyle(
                    color: Colors.white,
                  ),
                  getTitles: (value) {
                    switch (value.toInt()) {
                      case -10:
                        return '-10';
                      case 0:
                        return '0';
                      case 10:
                        return '10';
                      case 20:
                        return '20';
                      case 30:
                        return '30';
                    }
                    return '';
                  },
                ),
                topTitles: SideTitles(
                  showTitles: false,
                ),
                rightTitles: SideTitles(
                  showTitles: false,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

折れ線グラフをデザインする

  • isCurved:「true」で折れ線を曲線に変更
  • colors:「List<Color>」でグラデーションにする
  • barWidth:「int」で折れ線の太さを指定
  • belowBarData:グラフ下を塗りつぶせる

LineChartBarDataで折れ線グラフのデザインを指定できます。

//ソース
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: LineChart(
              LineChartData(
                minX: 0,
                maxX: 11,
                minY: -10,
                maxY: 35,
                lineBarsData: [
                  LineChartBarData(
                    spots: [
                      FlSpot(0, 6),
                      FlSpot(1, 6),
                      FlSpot(2, 9),
                      FlSpot(3, 15),
                      FlSpot(4, 19),
                      FlSpot(5, 22),
                      FlSpot(6, 26),
                      FlSpot(7, 27),
                      FlSpot(8, 24),
                      FlSpot(9, 18),
                      FlSpot(10, 13),
                      FlSpot(11, 8),
                    ],
                    isCurved: true,
                    colors: [
                      Colors.yellow,
                      Colors.blue,
                      Colors.pink,
                      Colors.green,
                    ],
                    barWidth: 8,
                    belowBarData: BarAreaData(
                      show: true,
                      colors: [
                        Colors.blue.withOpacity(0.5),
                        Colors.green.withOpacity(0.5),
                      ],
                    ),
                  ),
                ],
                titlesData: FlTitlesData(
                  show: true,
                  bottomTitles: SideTitles(
                    showTitles: true,
                    getTextStyles: (context, value) => const TextStyle(
                      color: Colors.white,
                    ),
                    getTitles: (value) {
                      switch (value.toInt()) {
                        case 2:
                          return '3月';
                        case 5:
                          return '6月';
                        case 8:
                          return '9月';
                        case 11:
                          return '12月';
                      }
                      return '';
                    },
                  ),
                  leftTitles: SideTitles(
                    showTitles: true,
                    getTextStyles: (context, value) => const TextStyle(
                      color: Colors.white,
                    ),
                    getTitles: (value) {
                      switch (value.toInt()) {
                        case -10:
                          return '-10';
                        case 0:
                          return '0';
                        case 10:
                          return '10';
                        case 20:
                          return '20';
                        case 30:
                          return '30';
                      }
                      return '';
                    },
                  ),
                  topTitles: SideTitles(
                    showTitles: false,
                  ),
                  rightTitles: SideTitles(
                    showTitles: false,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

参考

  • URLをコピーしました!
目次
閉じる