Flutter图表展示插件outline_pie_chart的使用

Flutter图表展示插件outline_pie_chart的使用

简介

Outline Pie Chart 是一个用于创建美观、可自定义和动画化的饼图的Flutter插件。它支持段落间隔、RTL（从右到左）语言，并提供了多种自定义选项，使您的数据可视化更加引人入胜和信息丰富。

应用场景

• 在应用程序中可视化性能指标
• 显示预算分配和财务数据
• 在健康和健身应用中展示进度
• 在教育应用中说明进度或成就
• 在电子商务应用中展示类别分布

功能特性

• 可自定义的段落：定义段落百分比和颜色以表示您的数据。
• 动画绘制：可选地动画化饼图绘制过程，以实现动态展示。
• 段落间隔：调整段落之间的间隔，以增强图表清晰度。
• RTL支持：为RTL语言（如波斯语）从右到左绘制图表。
• 中心小部件：在饼图中心添加小部件，以提供额外的上下文或信息。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  outline_pie_chart: ^0.0.1

然后运行以下命令：

flutter pub get

使用示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Outline Pie Chart Demo'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: PieChartWidget(
            data: [
              // 定义饼图的数据段
              PieData(percentage: 64, color: const Color(0xFFF0B800)), // 金色，占64%
              PieData(percentage: 36, color: const Color(0xFF5536BF)), // 紫色，占36%
            ],
            diameter: 300, // 饼图直径
            enableAnimation: true, // 启用动画
            animationDuration: const Duration(seconds: 2), // 动画持续时间
            strokeWidth: 40, // 饼图边框宽度
            gap: 4, // 段落之间的间隔
            isRTL: false, // 是否启用RTL模式
            child: const Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 中心文本内容
                Text(
                  'Total Asset Value',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF757575),
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  '2,798,625',
                  style: TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.w900,
                    color: Color(0xFF1C1C1E),
                  ),
                ),
                Text(
                  '\$',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF1C1C1E),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}