Flutter RadarChartの作成

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

```dart
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,),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
```
# 実行結果
表示はされたが、なんとも微妙な内容。。。
![スクリーンショット 2023-10-12 22.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50452/3ba1834e-32b0-6370-23db-e4e7d10c838a.png)

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

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

# RadarDataSetを2つに増やしてみると
```dart
            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の最小値を表示しているようだ。
- 内円が最小値の規定となっているように見える。
- 一方で外円が最大値を表しているようだ。
![スクリーンショット 2023-10-12 22.38.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50452/4ad677c1-268b-18d1-a616-37eefa3ab0f8.png)

# 項目にタイトル表示させるために getTitleを追加してみる。
```dart
        RadarChartData(
          getTitle: (index, angle){
            return RadarChartTitle(text: 'title-$index-$angle');
          },
```

# タイトル表示実行
- 北が始まりでインデック、および角度が順に増えているのがわかる。
- タイトルには黄色い下線がデフォルトで表示されるようだ。
![スクリーンショット 2023-10-12 22.51.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50452/fc9f5ac5-52c6-4966-5b29-af9bd398b33a.png)

# 色々な値を設定し表示のされ方を確認する。
```dart
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が表示される。
![スクリーンショット 2023-10-14 13.56.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50452/30cee4ec-c147-23d9-041f-05ef443b4a13.png)