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 分類