chart_components

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

chart_components 是一个 Flutter 包，提供两个动画图表组件：一个动画条形图和一个受 GitHub 可视化风格启发的动画日历网格图。专为数据展示设计，通过众多可配置属性提供广泛的自定义选项。这些组件非常适合以流畅动画展示时间序列数据或性能指标。基于 Flutter 渲染引擎构建，确保响应迅速且视觉效果出色的图表，适用于仪表板和分析界面。

适合场景

显示时间序列数据
可视化性能指标
创建仪表板小部件
构建分析接口
显示活动趋势
增强应用程序中的数据展示

主要特点

动画条形图
动画日历网格图表
丰富的自定义选项
流畅的动画
GitHub 风格设计
响应式布局

适合对象

数据可视化应用
仪表板开发
分析工具
活动跟踪功能
寻求可重用图表的Flutter开发者

使用建议

仅限两种图表类型
无内置数据转换
需要手动处理数据
未针对大型数据集进行优化
不支持服务器端渲染
依赖外部源代码

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated bar chart for Flutter

Customizable bar chart for Flutter. The component calculates min and max of data and resizes bars as needed.

Add a data collection with the values to generate the bars.
Add a string collection with the labels to display below the items (optional)
Change bar size, margins and top corners as needed.
Change bar's color based on value. Callback, optional.
Enable/disable value on top of bar
Add an icon to the top of the bar based on item's value. Callback, optiona.
Enable/disable animation.
Change animation duration and curve through the properties

Animated calendar grid for Flutter

Generates a grid for the selected month.
Changes day color through callback.
Animates changes. Animation curve and duration can be modified with the properties.

Demo

Demo:

Usage

To use plugin, just import package import 'package:chart_components/chart_components.dart';

Example

Check de example directory to access the project that implements the image shown above.

        ........
                    CalendarGrid(
                            year: 2020,
                            month: 1,
                            getColorOfDay: DataRepository.getDayColor,
                            animationDuration: Duration(milliseconds: 1500),
                    ),

        ...........
                    child: BarChart(
                    data: data,
                    labels: labels,
                    dislplayValue: true,
                    reverse: true,
                    getColor: DataRepository.getColor,
                    getIcon: DataRepository.getIcon,
                    barWidth: 42,
                    barSeparation: 12,
                    animationDuration: Duration(milliseconds: 1800),
                    animationCurve: Curves.easeInOutSine,
                    itemRadius: 30,
                    iconHeight: 24,
                    footerHeight: 24,
                    headerValueHeight: 16,
                    roundValuesOnText: false,
                    lineGridColor: Colors.lightBlue,
                    ),

搜索插件、代码仓与 APP 分类