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

安装插件