Flutter热力图绘制插件fl_heatmap的使用

插件简介

fl_heatmap 是一个用于Flutter应用的热力图组件。它允许开发者以直观的方式展示数据分布，通过颜色深浅来表示数值大小。

使用步骤

1. 添加依赖

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

dependencies:
  fl_heatmap: ^0.1.0

2. 安装依赖

通过命令行安装依赖包：

flutter packages get

3. 使用示例

下面是一个完整的示例代码，展示了如何创建一个热力图，并处理用户点击事件：

import 'dart:math';
import 'package:fl_heatmap/fl_heatmap.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  HeatmapItem? selectedItem;

  late HeatmapData heatmapDataPower;

  @override
  void initState() {
    _initExampleData();
    super.initState();
  }

  void _initExampleData() {
    const rows = [
      '2022',
      '2021',
      '2020',
      '2019',
      '2018',
      '2017',
      '2016',
      '2015',
    ];
    const columns = [
      'Jan',
      'Feb',
      'Mär',
      'Apr',
      'Mai',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Okt',
      'Nov',
      'Dez',
    ];
    final r = Random();
    const String unit = 'kWh';
    final items = [
      for (int row = 0; row < rows.length; row++)
        for (int col = 0; col < columns.length; col++)
          if (!(row == 3 && col < 2)) // 不添加特定位置的数据（模拟不完整数据的情况）
            HeatmapItem(
                value: r.nextDouble() * 6,
                style: row == 0 && col > 1 ? HeatmapItemStyle.hatched : HeatmapItemStyle.filled,
                unit: unit,
                xAxisLabel: columns[col],
                yAxisLabel: rows[row]),
    ];
    heatmapDataPower = HeatmapData(
      rows: rows,
      columns: columns,
      radius: 6.0,
      items: items,
    );
  }

  @override
  Widget build(BuildContext context) {
    final title = selectedItem != null
        ? '${selectedItem!.value.toStringAsFixed(2)} ${selectedItem!.unit}'
        : '--- ${heatmapDataPower.items.first.unit}';
    final subtitle = selectedItem != null
        ? '${selectedItem!.xAxisLabel} ${selectedItem!.yAxisLabel}'
        : '---';
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Heatmap plugin example app'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 16),
              Text(title, textScaleFactor: 1.4),
              Text(subtitle),
              const SizedBox(height: 8),
              Heatmap(
                  onItemSelectedListener: (HeatmapItem? selectedItem) {
                    debugPrint(
                        'Item ${selectedItem?.yAxisLabel}/${selectedItem?.xAxisLabel} with value ${selectedItem?.value} selected');
                    setState(() {
                      this.selectedItem = selectedItem;
                    });
                  },
                  rowsVisible: 5,
                  heatmapData: heatmapDataPower)
            ],
          ),
        ),
      ),
    );
  }
}

特性

• 自定义颜色方案：支持动态调整大小的颜色方案或使用预定义的颜色调色板，如 colorPaletteTemperature、colorPaletteRed 和 colorPaletteBlue。
• 动态轴标签：x轴和y轴标签完全动态生成。
• 隐藏轴标签：根据需要选择是否显示x轴/y轴标签。
• 交互功能：检测单元格点击事件，并返回选中的数据项，以便显示详细信息。
• 样式定制：为不同的单元格设置不同样式。
• 分页显示：可以只显示前几行，用户可以选择展开显示所有行。

应用实例

该插件已经被一些实际项目采用，例如 EHW+，以下是其界面截图：

希望以上内容能帮助你更好地理解和使用 fl_heatmap 插件！如果你有任何问题或需要进一步的帮助，请随时提问。