【Flutter】BarChart|fl_chartで棒グラフを生成

今回はBarChartの基本的な使い方を紹介します。

BarChartを使えば棒グラフを生成できます。BarChartfl_chartパッケージを導入して使用できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|fl_chartの導入

flutter pub add fl_chart
import 'package:fl_chart/fl_chart.dart';

fl_chartを導入します。

BarChartの使い方

BarChart(
  BarChartData(
    maxY: 10,
    minY: -10,
    barGroups: [
      BarChartGroupData(
        x: 5,
        barsSpace: 15,
        barRods: [
          BarChartRodData(toY: 5),
          BarChartRodData(toY: 3),
          BarChartRodData(toY: 2),
          BarChartRodData(toY: -4),
          BarChartRodData(toY: -3),
        ],
      ),
    ],
  ),
),

上記コードがBarChartの基本形です。

BarChartBarChartDataを渡し、y軸の範囲などを指定できます。

barGroupsList<BarChartGroupData>を渡しx軸の範囲やデータを指定します。棒グラフのデータはbarRodsのリストにBarChartRodDataを渡して追加できます。

BarChartRodDataでデータ別にデザインを指定

BarChart(
  BarChartData(
    maxY: 10,
    minY: -10,
    barGroups: [
      BarChartGroupData(
        x: 5,
        barsSpace: 15,
        barRods: [
          BarChartRodData(
            toY: 5,
            width: 15,
            color: Colors.blue,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(7),
              topRight: Radius.circular(7),
            ),
          ),
          BarChartRodData(
            toY: 3,
            width: 15,
            color: Colors.orange,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(7),
              topRight: Radius.circular(7),
            ),
          ),
          BarChartRodData(
            toY: 2,
            width: 15,
            color: Colors.purple,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(7),
              topRight: Radius.circular(7),
            ),
          ),
          BarChartRodData(
            toY: -4,
            width: 15,
            color: Colors.green,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(7),
              bottomRight: Radius.circular(7),
            ),
          ),
          BarChartRodData(
            toY: -3,
            width: 15,
            color: Colors.pink,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(7),
              bottomRight: Radius.circular(7),
            ),
          ),
        ],
      ),
    ],
  ),
),

BarChartRodDataでデータ別にデザインを指定できます。

サンプルコード

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: BarChart(
            BarChartData(
              maxY: 10,
              minY: -10,
              barGroups: [
                BarChartGroupData(
                  x: 5,
                  barsSpace: 15,
                  barRods: [
                    BarChartRodData(
                      toY: 5,
                      width: 15,
                      color: Colors.blue,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(7),
                        topRight: Radius.circular(7),
                      ),
                    ),
                    BarChartRodData(
                      toY: 3,
                      width: 15,
                      color: Colors.orange,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(7),
                        topRight: Radius.circular(7),
                      ),
                    ),
                    BarChartRodData(
                      toY: 2,
                      width: 15,
                      color: Colors.purple,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(7),
                        topRight: Radius.circular(7),
                      ),
                    ),
                    BarChartRodData(
                      toY: -4,
                      width: 15,
                      color: Colors.green,
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(7),
                        bottomRight: Radius.circular(7),
                      ),
                    ),
                    BarChartRodData(
                      toY: -3,
                      width: 15,
                      color: Colors.pink,
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(7),
                        bottomRight: Radius.circular(7),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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