Flutter RadarChartの作成

FlutterでRadarChartを作成する。最小限のコードでレーダーチャートが表示されることを試みた。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: RadarChart(
        RadarChartData(
          dataSets: [
            RadarDataSet(
              dataEntries: const [
                RadarEntry(value: 3,),
                RadarEntry(value: 5,),
                RadarEntry(value: 10,),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

表示はされたが、なんとも微妙な内容。。。

RadarEntryが2つだと以下の実行時エラー

dataEntries == null || dataEntries.isEmpty || dataEntries.length >= 3
"Radar needs at least 3 RadarEntry"

RadarDataSetを2つに増やしてみると

            RadarDataSet(
              dataEntries: const [
                RadarEntry(value: 3,),
                RadarEntry(value: 5,),
                RadarEntry(value: 2,),
                RadarEntry(value: 3,),
                RadarEntry(value: 6,),
                RadarEntry(value: 5,),
                RadarEntry(value: 14,),
                RadarEntry(value: 4,),
              ],
            ),
            RadarDataSet(
              dataEntries: const [
                RadarEntry(value: 2,),
                RadarEntry(value: 8,),
                RadarEntry(value: 5,),
                RadarEntry(value: 0,),
                RadarEntry(value: 9,),
                RadarEntry(value: 10,),
                RadarEntry(value: 2,),
                RadarEntry(value: 16,),
              ],
            ),

RadarDataSetを2セットの実行結果

• 2つのレーダーが表示されている。
• valueに0を含めたが。レーダーの中心に表示されていない。
• 赤文字は、valueの最小値を表示しているようだ。
• 内円が最小値の規定となっているように見える。
• 一方で外円が最大値を表しているようだ。
  

項目にタイトル表示させるために getTitleを追加してみる。

        RadarChartData(
          getTitle: (index, angle){
            return RadarChartTitle(text: 'title-$index-$angle');
          },

タイトル表示実行

• 北が始まりでインデック、および角度が順に増えているのがわかる。
• タイトルには黄色い下線がデフォルトで表示されるようだ。
  

色々な値を設定し表示のされ方を確認する。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: RadarChart(
        RadarChartData(
          dataSets: [　// RadarDataSetで設定するRadarEntryの個数は全て同じにしないとエラーになる。
            RadarDataSet(
              dataEntries: const [
                RadarEntry(value: 1,),
                RadarEntry(value: 1,),
                RadarEntry(value: 1,),
                RadarEntry(value: 1,),
                RadarEntry(value: 1,),
                RadarEntry(value: 1,),
                RadarEntry(value: 1,),
                RadarEntry(value: 10,),
              ],
              fillColor: Colors.transparent, // 囲まれた内側の矩形の塗り潰し。ここでは透明を設定。
              borderColor: Colors.transparent, // 囲まれた外側の教会の塗り潰し。ここでは透明を設定。
            ),
            RadarDataSet(
              dataEntries: const [
                RadarEntry(value: 3,),
                RadarEntry(value: 5,),
                RadarEntry(value: 2,),
                RadarEntry(value: 3,),
                RadarEntry(value: 6,),
                RadarEntry(value: 5,),
                RadarEntry(value: 8,),
                RadarEntry(value: 4,),
              ],
            ),
            RadarDataSet(
              dataEntries: const [
                RadarEntry(value: 0,),
                RadarEntry(value: 8,),
                RadarEntry(value: 5,),
                RadarEntry(value: 1,),
                RadarEntry(value: 9,),
                RadarEntry(value: 7,),
                RadarEntry(value: 2,),
                RadarEntry(value: 8,),
              ],
              fillColor: const Color.fromARGB(128, 250, 200, 200),
              borderColor: Colors.brown,
              borderWidth: 5, // 囲まれた外側の境界線の幅
              entryRadius: 10, // レーダーの頂点にある丸の大きさ
            ),
          ],
          radarBackgroundColor: const Color.fromARGB(128, 128, 128, 128), // 
          radarBorderData: const BorderSide(color: Colors.green,width: 5), // レーダーチャート外周の色と幅
          radarShape: RadarShape.polygon,　// レーダーチャートのベースを矩形に設定。他に円がある
          borderData: FlBorderData(show: false),
          getTitle: (index, angle){ // 各軸に文字列を表示
            return RadarChartTitle(text: 'title-$index-$angle');
          },
          titleTextStyle: const TextStyle(color: Colors.blue, fontSize: 12),// タイトルの色とサイズ指定
          titlePositionPercentageOffset: 0.0, // タイトルの表示位置を設定
          tickCount: 9, // チャートを9の線で分割
          ticksTextStyle: const TextStyle(fontSize: 12, color: Colors.black), // 各レーダーの罫線ごとの値を表示
          tickBorderData: const BorderSide(color: Colors.purple,width: 1), // 罫線の色と幅
          gridBorderData: const BorderSide(color: Colors.pink, width: 10), // 軸の色と幅
        ),
      ),
    );
  }
}

表示

• RadarEntryに0を設定しても中心にならず、一番内側のレーダーにプロットされる。
• 全RadarEntryの最大値が一番外側にプロットされる。
• 各レーダーの区切りは、(最大値-最小値)/tickCountの値。doubleのため、整数となるように調整しても.0が表示される。