Flutter饼状图绘制插件flutter_pie_chart的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter饼状图绘制插件flutter_pie_chart的使用

特性

使用

TODO: 包含一些简短且有用的示例供用户参考。更长的示例可以添加到/example文件夹。

饼图类示例：

final List<Pie> pies = [
    Pie(color: const Color(0xFFFF6262), proportion: 8),
    Pie(color: const Color(0xFFFF9494), proportion: 3),
    Pie(color: const Color(0xFFFFDCDC), proportion: 8),
];

Flutter饼图小部件示例

FlutterPieChart(
  pies: pies,
  selected: 2,
),

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_pie_chart插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个widget是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter饼图示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Pie> pies = [
    Pie(color: const Color(0xFFFF6262), proportion: 8),
    Pie(color: const Color(0xFFFF9494), proportion: 3),
    Pie(color: const Color(0xFFFFDCDC), proportion: 8),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter饼图'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: deviceSize.width * 0.5,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FlutterPieChart(
                  pies: pies,
                  selected: 2,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter饼状图绘制插件flutter_pie_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter饼状图绘制插件flutter_pie_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用flutter_pie_chart插件来绘制饼状图的代码示例。这个插件非常适合在Flutter应用中展示数据分布的情况。

首先，确保你已经在pubspec.yaml文件中添加了flutter_pie_chart依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_pie_chart: ^4.0.0  # 请确保使用最新版本

然后，运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何使用flutter_pie_chart来绘制一个饼状图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Pie Chart Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PieChartScreen(),
    );
  }
}

class PieChartScreen extends StatelessWidget {
  // 示例数据
  final List<PieChartData> data = [
    PieChartData(
      color: Colors.blue,
      value: 30,
      title: 'Category A',
    ),
    PieChartData(
      color: Colors.red,
      value: 25,
      title: 'Category B',
    ),
    PieChartData(
      color: Colors.green,
      value: 20,
      title: 'Category C',
    ),
    PieChartData(
      color: Colors.orange,
      value: 25,
      title: 'Category D',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pie Chart Demo'),
      ),
      body: Center(
        child: PieChart(
          dataMap: Map.fromEntries(
            data.map(
              (e) => MapEntry(e.title, e.value),
            ),
          ),
          animationDuration: Duration(milliseconds: 800),
          ringStrokeWidth: 32.0,
          chartRadius: MediaQuery.of(context).size.width / 2,
          chartType: ChartType.ring, // 或者 ChartType.disk
          labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          sectionsSpace: 0,
          initialAngleInDegrees: 0,
          centerSpaceRadius: 50,
          legendOptions: LegendOptions(
            showLegends: true,
            legendAlign: LegendAlign.kBottom,
            legendPosition: LegendPosition.kRight,
            legendShape: BoxShape.circle,
            legendTextStyle: TextStyle(
              fontSize: 14,
              color: Colors.black,
            ),
          ),
          borderData: FlBorderData(
            showBorder: true,
            borderStrokeWidth: 8,
          ),
          colorList: data.map((e) => e.color).toList(),
        ),
      ),
    );
  }
}

class PieChartData {
  final Color color;
  final double value;
  final String title;

  PieChartData({required this.color, required this.value, required this.title});
}

在这个示例中：

  1. PieChartData 类用于存储每个饼状图部分的数据，包括颜色、值和标题。
  2. PieChartScreen 类是主屏幕，它使用PieChart小部件来显示饼状图。
  3. PieChart小部件接受多个参数，如dataMap（数据映射）、animationDuration（动画持续时间）、chartRadius（图表半径）等。
  4. LegendOptions用于配置图例的显示样式。

这个示例展示了如何使用flutter_pie_chart插件来创建一个环形图（也可以更改为磁盘图）。你可以根据需要调整数据和其他配置选项来定制饼状图。

回到顶部