FlutterでBarChartを作成

FlutterのBarChartを使い、どのような表示が可能であるか適当に試してみる。

• BarCharRodDataの数値はdoubleを指定する必要がある。
• BarChartGroupDataのxはint型。
• 各クラスで設定可能な項目。

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: BarChart(
          BarChartData(
            barGroups: [
              BarChartGroupData(
                x: 1,
                barRods: [
                  BarChartRodData(
                    toY: 2,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

シンプルな表示

• BarChartGroupDataのxに指定した値が、Barの下に表示。
• 縦軸の数字が見切れているが、BarChartRodDataで指定した2が最大値として表示されている。
  

色々な項目を設定してみる。

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main(){
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: BarChart(
          BarChartData(
            minY: -1,
            maxY: 5,
            groupsSpace: 0.1,
            baselineY: -0.34,
            titlesData: const FlTitlesData(
              rightTitles: AxisTitles(),
            ),
            gridData: const FlGridData(
              //show: false,
              drawHorizontalLine: true,
              horizontalInterval: 1.6,
              drawVerticalLine: true,
              verticalInterval: 0.1
            ),
            barGroups: [
              BarChartGroupData(
                x: 1,
                barsSpace: 50,
                barRods: [
                  BarChartRodData(
                    toY: 2,
                    width: 20,
                  ),
                  BarChartRodData(
                    toY: 3,
                    color: Colors.red,
                  ),
                ],
                
              ),
              BarChartGroupData(
                x: 1,
                barRods:[
                  BarChartRodData(
                    toY: 5,
                  ),
                  BarChartRodData(
                    toY: 3,
                    width: 20,
                    color: Colors.red,
                    borderRadius: BorderRadius.zero,
                    borderSide:const  BorderSide(
                      color: Colors.green,
                      width: 50,
                    ),
                  ),
                ],
                ),
            ],
          ),
        ),
      ),
    );
  }
}

実行結果

• BarChartData.minY,maxYを設定すると縦軸の下限上限として設定され、-1,5が表示
• BarChartData.groupSpaceは、目に見えて変化が見られないので、何が変わるのかわからない。。。
• BarChartData.baselineYは、縦軸の数値が変わる。指定した値の場所で水平線が引かれる。また、その値を規定として上下の水平線が引かれているように見える。細かい条件や計算式はあると思うが、なんとなくはこんな感じかと。
• BarChartData.tilesDataは、四方の軸に関して、表示非表示を設定できる。デフォルトは、top以外は、表示。引数空のAxisTitlesを指定することで非表示になる。FlTitlesDataのデフォルトは、四方全て表示のため、今回の例では、FlTitlesDataを指定する際にtop未設定のため、表示された。この辺りは、各依存クラスのデフォルトを理解して設定する。
• BarChartData.gridDataは、縦横の罫線について表示非表示を操作。横軸間隔(vertialInterval)は、0より大きく1未満の値を設定する。0や1の場合は両脇の軸と同じなので意味がない。0未満を設定すると真っ白になる。。基本は、水平方向を0から1とし、描画したい本数を用い1/(描画本数+1)を設定したら良さそう。縦軸は、0未満の値も設定可能。基本は横軸と同様に0から1を、minYとmaxYに置き換えて設定する。大体のhorizontalIntevalは、(maxY-minY)/描画本数のような感じ。
• BarChartGroupData.barSpaceは、グループ内のバー間隔を設定可能。
• BarChartRodData.widthでバーの横幅を設定可能。
• BarChartRotData.colorでバーの色も設定可能。
• BarChartRotData.borderRadiusでBorderRadius.zeroを設定すると上下の形状が半円から矩形に変わる。
• BarChartRotData.borderSideは、バーの色と幅を指定可能。widthに極端な値を指定すると限界はあるようだ。その場合緑枠線が他のグラフと比べて下にはみ出るように表示された。。
  

一度データを用意、見栄えもそれっぽいサンプルグラフを作ってみる。

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  MyApp({super.key});
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: BarChart(
          BarChartData(
            maxY: 30,
            titlesData: FlTitlesData(
              rightTitles: AxisTitles(),
              topTitles: AxisTitles(),
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  getTitlesWidget: (value, meta) {
                    return Text(groups[value.toInt()]);
                  },
                ),
              ),
            ), // FlTitlesData
            gridData: const FlGridData(show: false),
            barGroups: [
              ...List.generate(groups.length, (groupIndex) =>
                BarChartGroupData(
                  x: groupIndex,
                  barRods:[
                    ...List.generate(labels.length, (index) =>
                      BarChartRodData(
                        toY: datasets[groupIndex][index],
                        color: labelsColor[index],
                      )
                    ),
                  ], // barRods
                ) // BarChartGroupData
              )
            ], // barGroups
          ),
        ), // BarChartData
      ), // BarChart
    ); // MaterialApp
  }
}

const List<String> groups = [
  '群馬',
  '愛知',
  '千葉',
  '茨城',
];

const List<String> labels = [
  'キャベツ',
  'レタス',
  '白菜',
  '大根',
  'ねぎ',
  'さつまいも',
];

const List<Color> labelsColor = [
  Colors.red,
  Colors.blue,
  Colors.green,
  Colors.yellow,
  Colors.purple,
  Colors.amber,
];

const List<List<double>> datasets = [
  [29.2, 17.88, 2.95, 3.28, 1.84, 0,], // 群馬
  [26.72, 0.53, 2.19, 2.45, 0.744, 0,], // 愛知
  [11.99, 0.758, 0.723, 14.75, 5.23, 8.74,], // 千葉
  [10.94, 8.7, 25.3, 5.54, 5.22, 18.92,], // 茨城
];

表示結果

なんとなくそれっぽいBarChartが表示された。