🐈
Flutterでレーダーチャートを作ってみた
Daily Blogging22日目
Flutterで個人開発中。
グラフを表示してデータの状況がわかりやすくなるようにしたかった
とりあえずこんな感じのを実装してみた。
使用したパッケージ
チャート関連のパッケージは色々あるらしい
今回は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