Flutter图表绘制插件waffle_chart的使用

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

Flutter图表绘制插件waffle_chart的使用

本README描述了该软件包。如果您将此软件包发布到pub.dev，则此README的内容将出现在您的软件包的首页。

对于如何编写一个好的软件包README的信息，请参阅撰写软件包页面指南。

对于开发软件包的一般信息，请参阅Dart撰写库软件包指南和Flutter开发软件包和插件指南。

特性

以下是经过改进的功能列表：

  • 月度图表：轻松创建基于月份的条形图，以可视化单个月份内的每日进度。
  • 年度图表：生成全面的年度条形图，适用于跟踪整个年度内的长期趋势和模式。
  • 最小化数据输入：只需传递填充的数据点，其余部分由软件包处理，使图表创建快速且高效。

开始使用

要开始使用该软件包，请遵循以下步骤：

  1. 安装软件包：在pubspec.yaml文件中添加软件包。
dependencies:
  waffle_chart: latest_version
  1. 导入软件包：在您想要使用waffle图表的文件中导入软件包。
import 'package:waffle_chart/waffle_chart.dart';

使用方法

年度图表

WaffleChart(
  chartData: WaffleChartData(
    showYearLable: true,
    showEndOfYear: false,
    filledColor: Color(0xffE76504),
    filledBorderColor: Colors.transparent,
    unfilledColor: Color(0xffFDE7D5),
    unfilledBorderColor: Color(0xffFDE7D5),
    year: 2024,
    width: 300,
    mainAxisSpacing: 2,
    crossAxisSpacing: 2,
    lableChartGap: 16,
    lableStyle: TextStyle(
      fontSize: 10,
      fontWeight: FontWeight.w500,
      color: Colors.black,
    ),
    dataPoints: e,
  ),
),

月度图表

WaffleChart(
  chartData: WaffleChartData(
    showMonthLable: true,
    showFullMonthName: true,
    showYearLable: true,
    filledColor: Color(0xffE76504),
    filledBorderColor: Colors.transparent,
    unfilledColor: Color(0xffFDE7D5),
    unfilledBorderColor: Color(0xffFDE7D5),
    isLableAtTop: true,
    year: 2024,
    month: 10,
    width: 100,
    mainAxisSpacing: 2,
    crossAxisSpacing: 2,
    lableStyle: TextStyle(
      fontSize: 10,
      fontWeight: FontWeight.w500,
      color: Colors.black,
    ),
    dataPoints: e,
  ),
),

示例代码

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

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

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: WaffleChart(
          chartData: WaffleChartData(
            showYearLable: true,
            showEndOfYear: false,
            filledColor: const Color(0xffE76504),
            filledBorderColor: Colors.transparent,
            unfilledColor: const Color(0xffFDE7D5),
            unfilledBorderColor: const Color(0xffFDE7D5),
            year: 2024,
            width: 300,
            mainAxisSpacing: 2,
            crossAxisSpacing: 2,
            lableChartGap: 16,
            lableStyle: const TextStyle(
              fontSize: 10,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
            dataPoints: [
              DayData(
                isFilled: true,
                date: DateTime(2024, 10, 3),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


waffle_chart 是一个用于 Flutter 的轻量级图表插件，用于绘制类似华夫饼图（Waffle Chart）的图表。华夫饼图通常用于显示百分比或比例，通过将图表分成若干个小方块来表示数据。

安装 waffle_chart 插件

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

dependencies:
  flutter:
    sdk: flutter
  waffle_chart: ^0.2.0

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

基本用法

以下是一个简单的示例，展示如何使用 waffle_chart 插件来创建一个华夫饼图：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Waffle Chart Example'),
        ),
        body: Center(
          child: WaffleChart(
            totalValue: 100,
            data: [
              WaffleChartData(value: 40, color: Colors.blue),
              WaffleChartData(value: 30, color: Colors.green),
              WaffleChartData(value: 20, color: Colors.orange),
              WaffleChartData(value: 10, color: Colors.red),
            ],
            rows: 10,
            columns: 10,
            borderRadius: 8,
            padding: 2,
          ),
        ),
      ),
    );
  }
}

参数说明

  • totalValue: 图表的总值，通常为 100，表示百分比。
  • data: 一个 WaffleChartData 列表，包含每个部分的值和颜色。
  • rows: 图表中的行数。
  • columns: 图表中的列数。
  • borderRadius: 每个小方块的圆角半径。
  • padding: 小方块之间的间距。

自定义样式

你可以通过调整 rows 和 columns 来控制图表的大小和形状。你还可以通过 borderRadius 和 padding 来调整图表的外观。

实时更新数据

如果你需要实时更新图表数据，可以使用 setState 来更新 data 列表中的值，并重新构建图表。

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<WaffleChartData> data = [
    WaffleChartData(value: 40, color: Colors.blue),
    WaffleChartData(value: 30, color: Colors.green),
    WaffleChartData(value: 20, color: Colors.orange),
    WaffleChartData(value: 10, color: Colors.red),
  ];

  void _updateData() {
    setState(() {
      data[0].value = 50;
      data[1].value = 20;
      data[2].value = 15;
      data[3].value = 15;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Waffle Chart Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              WaffleChart(
                totalValue: 100,
                data: data,
                rows: 10,
                columns: 10,
                borderRadius: 8,
                padding: 2,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _updateData,
                child: Text('Update Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部