Flutter图表绘制插件fastyle_charts的使用

Flutter图表绘制插件fastyle_charts的使用

fastyle_charts 是一套用于 fastyle 库的图表小部件集合。通过该库，开发者可以轻松地在Flutter应用中绘制各种类型的图表。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 fastyle_charts 绘制柱状图、饼图和甜甜圈图。

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:fastyle_charts/fastyle_charts.dart';
import 'package:fastyle_core/fastyle_core.dart';
import 'package:go_router/go_router.dart';

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

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

  @override
  State<MyApp> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // 定义数据列表
    final data = [
      FastChartData(label: 'Item 1', value: 80),
      FastChartData(label: 'Item 2', value: -20),
      FastChartData(label: 'Item 3', value: 40),
      FastChartData(label: 'Item 4', value: -60),
    ];

    // 定义饼图数据
    final pieData = [
      FastChartData(value: 0.12, color: Colors.blue.shade100, label: 'Blue'),
      FastChartData(value: 0.12, color: Colors.teal, label: 'Teal'),
      FastChartData(value: 0.15, color: Colors.mint, label: 'Mint'),
      FastChartData(value: 0.05, color: Colors.indigo, label: 'Indigo'),
      FastChartData(value: 0.30, color: Colors.purple, label: 'Purple'),
      FastChartData(value: 0.26, color: Colors.blueGrey, label: 'Blue Gray'),
    ];

    return FastApp(
      lightTheme: FastTheme.light.blue,
      darkTheme: FastTheme.dark.blue,
      routesForMediaType: (mediaType) => [
        GoRoute(
          path: '/',
          builder: (_, __) {
            return FastSectionPage(
              isViewScrollable: true,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const FastTitle(text: 'Bar Chart'),
                  const SizedBox(height: 24), // kFastVerticalSizedBox24
                  FractionallySizedBox(
                    widthFactor: 0.35,
                    alignment: FractionalOffset.center,
                    child: BarChart(data: data),
                  ),
                  const SizedBox(height: 24), // kFastVerticalSizedBox24
                  const FastTitle(text: 'Pie Chart'),
                  const SizedBox(height: 24), // kFastVerticalSizedBox24
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      FastPieChart(data: pieData, animate: true),
                      const SizedBox(width: 48), // kFastHorizontalSizedBox48
                      FastChartLegend(data: pieData),
                    ],
                  ),
                  const SizedBox(height: 24), // kFastVerticalSizedBox24
                  const FastTitle(text: 'Doughnut Chart'),
                  const SizedBox(height: 24), // kFastVerticalSizedBox24
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      FastDoughnutChart(data: pieData, animate: true),
                      const SizedBox(width: 48), // kFastHorizontalSizedBox48
                      FastChartLegend(data: pieData),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ],
    );
  }
}

代码解释

• 导入包：

  import 'package:fastyle_charts/fastyle_charts.dart';
  import 'package:fastyle_core/fastyle_core.dart';
  import 'package:go_router/go_router.dart';
  

  导入 fastyle_charts 和其他必需的包。

• 定义数据：

  final data = [
    FastChartData(label: 'Item 1', value: 80),
    FastChartData(label: 'Item 2', value: -20),
    FastChartData(label: 'Item 3', value: 40),
    FastChartData(label: 'Item 4', value: -60),
  ];
  

  定义柱状图的数据。

• 构建UI：

  return FastApp(
    lightTheme: FastTheme.light.blue,
    darkTheme: FastTheme.dark.blue,
    routesForMediaType: (mediaType) => [
      GoRoute(
        path: '/',
        builder: (_, __) {
          return FastSectionPage(
            isViewScrollable: true,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const FastTitle(text: 'Bar Chart'),
                const SizedBox(height: 24),
                FractionallySizedBox(
                  widthFactor: 0.35,
                  alignment: FractionalOffset.center,
                  child: BarChart(data: data),
                ),
                const SizedBox(height: 24),
                const FastTitle(text: 'Pie Chart'),
                const SizedBox(height: 24),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    FastPieChart(data: pieData, animate: true),
                    const SizedBox(width: 48),
                    FastChartLegend(data: pieData),
                  ],
                ),
                const SizedBox(height: 24),
                const FastTitle(text: 'Doughnut Chart'),
                const SizedBox(height: 24),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    FastDoughnutChart(data: pieData, animate: true),
                    const SizedBox(width: 48),
                    FastChartLegend(data: pieData),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    ],
  );