Flutter数据透视表插件pivot

Flutter数据透视表插件pivot_table的使用

简介

pivot_table 是一个用于创建可自定义数据透视表的Flutter插件，支持数据聚合、排序、过滤和分组。该插件非常适合以结构化的方式展示和分析大型数据集。

平台支持

桌面端：
移动端：
Web端：

功能特性

基于行和列的动态数据透视
支持JSON数组字符串作为数据源
支持聚合函数（如求和、计数等）
可自定义单元格渲染器和格式

入门指南

安装

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

dependencies:
  pivot_table:
    git:
      url: https://github.com/BoyPhanna/flutter_pivot_table.git

Web平台设置

为了使插件在Web平台上正常工作，您需要在 web/index.html 文件的 <head> 标签内添加 web_support.js 文件：

<head>
  <!-- ... -->
  <script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
  <!-- ... -->
</head>

Windows平台设置

要在Windows上构建项目，您需要安装 nuget CLI 工具，并将其路径添加到Windows的环境变量中。您可以按照官方文档的指示进行安装。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 pivot_table 插件。该示例将展示一个简单的数据透视表，包含地区、产品、客户等字段，并对销售额进行求和聚合。

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

// 模拟的JSON数据
String jsonData = '''
[
  {"Region": "North", "Product": "Laptop", "Sales": 1100, "Date": "2023-10-01", "Quantity": 5, "Customer": "01235667477 sfhsfslf", "Discount": 10},
  {"Region": "North", "Product": "Laptop", "Sales": 1100, "Date": "2023-10-01", "Quantity": 5, "Customer": "ABC3", "Discount": 10},
  {"Region": "North", "Product": "Tablet", "Sales": 350, "Date": "2023-10-02", "Quantity": 2, "Customer": "ABC", "Discount": 5},
  {"Region": "South", "Product": "Laptop", "Sales": 550, "Date": "2023-10-03", "Quantity": 3, "Customer": "LMN Inc", "Discount": 0},
  {"Region": "South", "Product": "Tablet", "Sales": 0, "Date": "2023-10-04", "Quantity": 0, "Customer": "ABC", "Discount": 0},
  {"Region": "West", "Product": "Smartphone", "Sales": 750, "Date": "2023-10-05", "Quantity": 4, "Customer": "AB", "Discount": 15},
  {"Region": "កម្ពុជា", "Product": "Monitor", "Sales": 500, "Date": "2023-10-06", "Quantity": 2, "Customer": "AB", "Discount": 7}
]
''';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Pivot Table Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.only(top: 30),
          child: PivotTable(
            // JSON 数据源
            jsonData: jsonData,
            
            // 隐藏的属性
            hiddenAttributes: const ["Date", "Quantity"],
            
            // 列字段
            cols: const ["Region", "Product"],
            
            // 行字段
            rows: const ["Customer"],
            
            // 聚合函数，这里使用求和
            aggregatorName: AggregatorName.sum,
            
            // 要聚合的值字段
            vals: const ["Sales"],
            
            // 边缘标签，显示总计
            marginLabel: "Total",
            
            // 渲染器类型，这里使用表格+柱状图
            rendererName: RendererName.tableBarchart,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter数据透视表插件pivot_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•8 小时前

更多关于Flutter数据透视表插件pivot_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用pivot_table插件的一个基本示例。请注意，pivot_table插件的具体实现和API可能会根据版本有所不同，因此请参考最新的官方文档以确保准确性。

首先，确保你的Flutter项目中已经添加了pivot_table依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  pivot_table: ^latest_version  # 请替换为实际最新版本号

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

接下来，我们可以编写一个简单的Flutter应用来展示如何使用pivot_table插件。

import 'package:flutter/material.dart';
import 'package:pivot_table/pivot_table.dart';  // 假设插件提供了这个导入路径

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

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

class PivotTableDemo extends StatefulWidget {
  @override
  _PivotTableDemoState createState() => _PivotTableDemoState();
}

class _PivotTableDemoState extends State<PivotTableDemo> {
  // 示例数据
  final List<Map<String, dynamic>> data = [
    {'Category': 'A', 'Type': 'X', 'Value': 10},
    {'Category': 'A', 'Type': 'Y', 'Value': 20},
    {'Category': 'B', 'Type': 'X', 'Value': 30},
    {'Category': 'B', 'Type': 'Y', 'Value': 40},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pivot Table Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: PivotTable(
          data: data,
          rows: ['Category'],
          columns: ['Type'],
          aggregates: [
            PivotTableAggregate(
              field: 'Value',
              aggregator: PivotTableAggregators.sum,
            ),
          ],
          onTableGenerated: (result) {
            // 这里可以处理生成的透视表数据，例如打印到控制台
            print(result);
          },
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

创建了一个简单的Flutter应用。
定义了一些示例数据，这些数据将被用于生成透视表。
使用PivotTable组件，并指定了行标签（rows）、列标签（columns）以及聚合函数（aggregates）。
onTableGenerated回调函数用于处理生成的透视表数据。在这个例子中，我们只是简单地将其打印到控制台。

请注意，上述代码是一个假设性的示例，因为实际的pivot_table插件可能有不同的API和组件结构。因此，你需要查阅该插件的官方文档来获取确切的API和用法。

如果pivot_table插件的API与上述示例有所不同，你可能需要根据文档调整代码中的组件和属性。例如，某些插件可能要求你以不同的方式传递数据或配置透视表的选项。始终参考最新的官方文档来确保代码的正确性。