🐈

Flutterでレーダーチャートを作ってみた

2025/01/12に公開

Daily Blogging22日目

Flutterで個人開発中。
グラフを表示してデータの状況がわかりやすくなるようにしたかった
とりあえずこんな感じのを実装してみた。

使用したパッケージ

チャート関連のパッケージは色々あるらしい
https://zenn.dev/tsuruo/articles/a8fc96ff5aa43a

今回はfl_chartを使用
解説記事もこれが多かったし、とりあえず簡単なチャートが実装できればそれで良かったので

実装したコード

Widget buildRadarChart() {
    return SizedBox(
      height: 300,
      child: RadarChart(
        RadarChartData(
          radarShape: RadarShape.polygon,
          radarBorderData: const BorderSide(
            color: MyColors.warmYellow, // 線の色
          ),
          titleTextStyle: const TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w500,
            color: Colors.black,
          ),
          tickCount: 3, // 表示する数値の数
          tickBorderData: const BorderSide(
            width: 1,
          ),
          getTitle: (index, angle) {
            switch (index) {
              case 0:
                return RadarChartTitle(text: 'Memories');
              case 1:
                return RadarChartTitle(text: 'Emotions');
              case 2:
                return RadarChartTitle(text: 'Places');
              case 3:
                return RadarChartTitle(text: 'Photos');
              case 4:
                return RadarChartTitle(text: 'Time');
              default:
                return RadarChartTitle(text: '');
            }
          },
          dataSets: [
            RadarDataSet(
              borderColor:  MyColors.warmYellow,
              fillColor:  MyColors.warmYellow.withOpacity(0.5),
              dataEntries: [
                RadarEntry(value: 4),
                RadarEntry(value: 3),
                RadarEntry(value: 2),
                RadarEntry(value: 5),
                RadarEntry(value: 4),
              ],
            ),
          ],
        ),
      ),
    );
  }

コードの詳細

ちょこちょこ装飾してるけど、表示するだけだったらgetTitlesとdataSetsがあれば良い
それぞれのオプションはここで説明してくれてる

データはとりあえず固定で表示している
ゆくゆくはDBから値取得してくる

今回は、デフォルトの表示に対してチャートの形と色をカスタマイズした

RadarChartDataのradarShapeは、チャートの形を変更できる
デフォルトはcircleで丸いチャートになる

今回はpolygonを採用

tickCountは、チャートの線の数
デフォルトは1でめちゃ少ない

radarBorderDataで一番外側のチャートの線を変更できる。
デフォルトは黒でこんな感じ

Discussion