【Flutter】PieChart|fl_chartで円グラフを生成

今回はPieChartの基本的な使い方を紹介します。

PieChartを使えば円グラフを生成できます。PieChartfl_chartパッケージを導入して使用できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|fl_chartの導入

flutter pub add fl_chart
import 'package:fl_chart/fl_chart.dart';

fl_chartを導入します。

PieChartの使い方

PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(value: 60),
      PieChartSectionData(value: 30),
      PieChartSectionData(value: 10),
    ],
  ),
),

上記コードがPieChartの基本形です。

PieChartPieChartDataを渡し円グラフのデータやデザインを指定します。

sectionsList<PieChartSectionData>を渡し、PieChartSectionDataで円グラフのデータを追加します。

PieChartSectionDataでデータ別にデザインを指定

PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(
        title: 'Apple',
        value: 60,
        radius: 80,
        color: Colors.red,
        titleStyle: TextStyle(
          color: Colors.white,
          fontSize: 35,
        ),
      ),
      PieChartSectionData(
        title: 'Orange',
        value: 30,
        radius: 70,
        color: Colors.orangeAccent,
        titleStyle: TextStyle(
          color: Colors.white,
          fontSize: 30,
        ),
      ),
      PieChartSectionData(
        title: 'Grape',
        value: 10,
        radius: 60,
        color: Colors.purple,
        titleStyle: TextStyle(
          color: Colors.white,
          fontSize: 15,
        ),
      ),
    ],
  ),
),

PieChartSectionDataでデータ別にタイトル、テキストスタイル、色などデザインを指定できます。

サンプルコード

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: PieChart(
            PieChartData(
              sections: [
                PieChartSectionData(
                  title: 'Apple',
                  value: 60,
                  radius: 80,
                  color: Colors.red,
                  titleStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 35,
                  ),
                ),
                PieChartSectionData(
                  title: 'Orange',
                  value: 30,
                  radius: 70,
                  color: Colors.orangeAccent,
                  titleStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 30,
                  ),
                ),
                PieChartSectionData(
                  title: 'Grape',
                  value: 10,
                  radius: 60,
                  color: Colors.purple,
                  titleStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次