line_chart

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個簡單的 Flutter 套件，用於建立可自訂的折線圖。它讓開發者能夠在 Android、iOS、Web、macOS、Windows 和 Linux 等多個平台上，以平滑且互動式的線條來視覺化資料趨勢。此套件著重於易用性與彈性，允許自訂顏色、標籤、格線以及圖表行為。非常適合需要以簡潔直覺格式呈現即時或歷史資料的應用程式。

適用情境

顯示時間序列資料
可視化效能指標
追蹤使用者隨時間的活動
展示財務或銷售趨勢
使用動態圖表創建儀表板

主要特色

可自訂的線條顏色和樣式
對多資料系列的支援
互動式觸控事件
可設定的座標軸標籤與網格線
跨裝置的響應式設計

適合對象

資料驅動的應用程式
分析儀表板
具備視覺化功能的行動與網頁應用程式
帶有圖表的教育工具
原型化圖表介面

使用建議

僅限基於行的可視化
無內建的工具提示或圖例
需要手動處理複雜的資料格式化
未針對大型資料集進行優化
依賴外部相依性以實現進階功能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Line Chart

A simple flutter package to create a custom line chart

Installations

Add line_chart: ^1.0.9 in your pubspec.yaml dependencies. And import it:

import 'package:line_chart/charts/line-chart.widget.dart';

How to use

Simply create a LineChart widget and pass the required params:

LineChart(
  width: 300, // Width size of chart
  height: 180, // Height size of chart
  data: [], // The value to the chart
  linePaint: Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black, // Custom paint for the line 
),

Here is the widget with all options for use.

LineChart(
  width: 300, // Width size of chart
  height: 180, // Height size of chart
  data: [], // The value to the chart
  linePaint: Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black, // Custom paint for the line 
  circlePaint: Paint()..color = Colors.black, // Custom paint for the line 
  showPointer: true, // When press or pan update the chart, create a pointer in approximated value (The default is true)
  showCircles: true, // Show the circle in every value of chart
  customDraw: (Canvas canvas, Size size) {}, // You can draw anything in your chart, this callback is called when is generating the chart
  circleRadiusValue: 6, // The radius value of circle
  linePointerDecoration: BoxDecoration(
    color: Colors.black,
  ) // Your line pointer decoration,
  pointerDecoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.black,
  ) // Your decoration of circle pointer,
  insideCirclePaint: Paint()..color = Colors.white // On your circle of the chart, have a second circle, which is inside and a slightly smaller size.
  onValuePointer: (MonthChartModel value) {
    print('onValuePointer');
  } // This callback is called when change the pointer,
  onDropPointer: () {
    print('onDropPointer');
  }, // This callback is called when it is on the pointer and removes your finger from the screen
),

For a more detail example please take a look at the example folder.

-

If something is missing, feel free to open a ticket or contribute!

搜尋套件、儲存庫與 APP 分類

安裝套件