Flutter环形图表插件donut_chart的使用

Rounded Donut Chart（圆角环形图）带自定义提示框。

安装

在你的Flutter项目的pubspec.yaml文件中，添加以下依赖：

dependencies:
  fan_donut_chart: latest

导入环形图表包：

import 'package:donut_chart/donut_chart.dart';

使用

只需创建一个DonutChartWidget小部件，并传递所需的参数：

DonutChartWidget(
  size: 200, // 环形图的大小
  strokeWidth: 30, // 环形图边框的厚度
  tooltipBgColor: const Color.fromARGB(154, 178, 178, 178), // 提示框背景颜色
  data: [
    DonutSectionModel(label: "Instagram", value: 40, color: const Color(0xFFcd2e64)), // 数据段
    DonutSectionModel(label: "Facebook", value: 30, color: const Color(0xFF4453b3)),
    DonutSectionModel(label: "X", value: 20, color: const Color(0xFF5aa9f2)),
    DonutSectionModel(label: "Threads", value: 10, color: const Color(0xFFe35655)),
  ],
)

自定义

可以通过以下参数来自定义DonutChartWidget小部件：

DonutChartWidget({
  required List<DonutSectionModel> data, // 环形图的数据段列表
  double size = 200, // 环形图的大小，默认值为200
  double strokeWidth = 40, // 环形图边框的厚度，默认值为40
  Color tooltipBgColor = const Color.fromARGB(146, 199, 199, 199), // 提示框背景颜色，默认为半透明灰色
  double tooltipRadius = 10, // 提示框圆角半径，默认值为10
  TextStyle tooltipTextStyle = const TextStyle(color: Colors.black, fontSize: 18), // 提示框内文字样式，默认为黑色字体大小18
  double tooltipLineLength = 40, // 提示框连接线长度，默认值为40
})

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Donut Chart Package',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DonutChartApp(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Donut Chart Example'),
        ),
        body: DonutChartWidget(
          size: 200, // 环形图的大小
          strokeWidth: 30, // 环形图边框的厚度
          tooltipBgColor: const Color.fromARGB(154, 178, 178, 178), // 提示框背景颜色
          data: [
            DonutSectionModel(label: "Instagram", value: 40, color: const Color(0xFFcd2e64)), // 数据段
            DonutSectionModel(label: "Facebook", value: 30, color: const Color(0xFF4453b3)),
            DonutSectionModel(label: "X", value: 20, color: const Color(0xFF5aa9f2)),
            DonutSectionModel(label: "Threads", value: 10, color: const Color(0xFFe35655)),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter环形图表插件donut_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼•4 天前

更多关于Flutter环形图表插件donut_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用donut_chart插件来创建环形图表的代码示例。

首先，你需要在你的pubspec.yaml文件中添加donut_chart依赖：

dependencies:
  flutter:
    sdk: flutter
  donut_chart: ^1.0.0  # 请注意版本号，这里使用的是假设的版本号，实际使用时请检查最新版本

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

接下来是一个完整的Flutter应用示例，它展示了如何使用donut_chart插件来创建一个环形图表：

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

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

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

class DonutChartExample extends StatefulWidget {
  @override
  _DonutChartExampleState createState() => _DonutChartExampleState();
}

class _DonutChartExampleState extends State<DonutChartExample> {
  final List<DonutSegmentData> data = [
    DonutSegmentData(30, Colors.blue, 'A'),
    DonutSegmentData(40, Colors.green, 'B'),
    DonutSegmentData(30, Colors.orange, 'C'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Donut Chart Example'),
      ),
      body: Center(
        child: DonutChart(
          data: data,
          width: 200,
          height: 200,
          isAnimated: true,
          animationDuration: Duration(seconds: 2),
          centerText: '70%',
          centerTextStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          centerTextBackgroundColor: Colors.white70,
          edgeLabelStyle: TextStyle(fontSize: 14, color: Colors.black),
        ),
      ),
    );
  }
}

class DonutSegmentData {
  final int value;
  final Color color;
  final String label;

  DonutSegmentData(this.value, this.color, this.label);
}

代码说明：

依赖导入：
- import 'package:flutter/material.dart'; 导入Flutter的核心Material Design组件。
- import 'package:donut_chart/donut_chart.dart'; 导入donut_chart插件。
应用入口：
- MyApp 类是应用的入口，它配置了一个基本的Material应用。
主页面：
- DonutChartExample 是一个有状态的Widget，用于展示环形图表。
- 在其build方法中，我们创建了一个Scaffold，其中包含一个AppBar和一个居中的DonutChart。
环形图表数据：
- DonutSegmentData 类定义了环形图表的单个段的数据，包括值、颜色和标签。
- data 列表包含了环形图表的所有段数据。
环形图表配置：
- DonutChart 组件接受多个参数来配置环形图表，包括数据、尺寸、是否动画显示、动画持续时间、中心文本、中心文本样式、中心文本背景颜色以及边缘标签样式。

你可以根据需要调整这些参数来定制环形图表的外观和行为。确保在实际项目中检查donut_chart插件的最新版本和文档，以获取最新的功能和更新。