Flutter树状图展示插件syncfusion_flutter_treemap的使用

Flutter Treemap library

syncfusion_flutter_treemap 是一个用于创建交互式树状图的Flutter库，可以将扁平和分层数据可视化为基于定量变量进行大小和颜色设置的矩形。它支持多种算法（如squarified、slice和dice）来布局数据。

功能概述

• 布局：支持不同的布局算法（如squarified、slice、dice），以表示扁平和分层结构的数据。
  • 
  • 
  • 
• 层次结构支持：除了扁平级别外，还支持层次结构。每个矩形可以包含更小的矩形来表示子数据。
  • 
• 标签：添加任何类型的widget（如文本widget）以提高单个矩形的可读性。
• 选择：允许选择矩形以突出显示并执行特定功能（如显示弹出窗口或导航到不同页面）。
  • 
• 图例：使用不同的图例样式来清晰地提供树状图数据的信息。
  • 
• 颜色映射：根据层级自定义矩形的颜色，可以为特定值或值范围设置颜色。
  • 
• 工具提示：通过完全可自定义的工具提示显示有关矩形的更多信息。
  • 
• 钻取：深入查看较大的分层数据集以获得更好的可视化效果。
• 排序：按升序或降序对矩形进行排序。
• 布局方向：在矩形的不同角落布局矩形。可能的方向有topLeft、topRight、bottomLeft和bottomRight。
• 指针图例：当悬停在矩形上时，在条形渐变图例顶部显示指针。
• 自定义背景widget：添加任何类型的自定义widget（如图像widget）作为矩形的背景，以丰富UI并轻松可视化特定矩形显示的数据类型。
  • 

安装与示例代码

安装

安装最新版本的 syncfusion_flutter_treemap 插件：

dependencies:
  syncfusion_flutter_treemap: ^<latest_version>

示例代码

以下是一个完整的示例代码，展示了如何使用 syncfusion_flutter_treemap 创建一个树状图，并添加标签和工具提示。

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_treemap/treemap.dart';

void main() {
  return runApp(const TreemapApp());
}

/// This widget will be the root of application.
class TreemapApp extends StatelessWidget {
  const TreemapApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Treemap Demo',
      home: MyHomePage(),
    );
  }
}

/// This widget is the home page of the application.
class MyHomePage extends StatefulWidget {
  /// Initialize the instance of the [MyHomePage] class.
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  late List<SocialMediaUsers> _source;

  @override
  void initState() {
    _source = const <SocialMediaUsers>[
      SocialMediaUsers('India', 'Facebook', 25.4),
      SocialMediaUsers('USA', 'Instagram', 19.11),
      SocialMediaUsers('Japan', 'Facebook', 13.3),
      SocialMediaUsers('Germany', 'Instagram', 10.65),
      SocialMediaUsers('France', 'Twitter', 7.54),
      SocialMediaUsers('UK', 'Instagram', 4.93),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Treemap demo')),
      body: SfTreemap(
        dataCount: _source.length,
        weightValueMapper: (int index) {
          return _source[index].usersInMillions;
        },
        levels: <TreemapLevel>[
          TreemapLevel(
            groupMapper: (int index) {
              return _source[index].country;
            },
            labelBuilder: (BuildContext context, TreemapTile tile) {
              return Padding(
                padding: const EdgeInsets.all(2.5),
                child: Text(
                  tile.group,
                  style: const TextStyle(color: Colors.black),
                ),
              );
            },
            tooltipBuilder: (BuildContext context, TreemapTile tile) {
              return Padding(
                padding: const EdgeInsets.all(10),
                child: Text(
                    '''Country          : ${tile.group}\nSocial media : ${tile.weight}M''',
                    style: const TextStyle(color: Colors.black)),
              );
            },
          ),
        ],
      ),
    );
  }
}

/// Represents the class for social media users.
class SocialMediaUsers {
  /// Constructor of [SocialMediaUsers].
  const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);

  /// Specifies the country.
  final String country;

  /// Specifies the type of social media.
  final String socialMedia;

  /// Specifies the users count.
  final double usersInMillions;
}

运行结果

上述代码将生成一个树状图，其中每个矩形代表一个国家的社交媒体用户数量。矩形的大小和颜色是根据用户数量自动调整的，并且可以通过点击矩形显示详细信息。

支持与反馈

如果您有任何问题或需要帮助，请联系 Syncfusion 的支持团队或通过社区论坛提交问题。您还可以在反馈门户中提交功能请求或报告错误。

关于 Syncfusion®

Syncfusion 成立于2001年，总部位于北卡罗来纳州的研究三角园区，拥有超过20,000家客户和100多万用户，包括大型金融机构、财富500强公司和全球IT咨询公司。Syncfusion 提供了1,000多个控件和框架，涵盖了Web、移动和桌面开发等多个领域。