flutter_sparkline

Flutter 精美迷你图。

安装

从pub 安装最新版本。

快速入门

导入包，创建一个Sparkline，然后将数据传递给它。

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/flutter_sparkline.dart';

void main() {
  var data = [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0];
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 100.0,
            child: new Sparkline(
              data: data,
            ),
          ),
        ),
      ),
    ),
  );
}

example_base

自定义

Sparkline

属性 默认值
lineWidth 2.0
lineColor Colors.lightBlue
lineGradient 空

示例

new Sparkline(
  data: data,
  lineWidth: 5.0,
  lineColor: Colors.purple,
);

example_lineopts

new Sparkline(
  data: data,
  lineWidth: 10.0,
  lineGradient: new LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.purple[800], Colors.purple[200]],
  ),
);

example_line_gradient

Points

属性 默认值
pointsMode PointsMode.none
pointSize 4.0
pointColor Colors.lightBlue[800]
PointsMode 描述
无（默认） 不绘制单个点。
all 绘制数据集中所有的点。
last 只绘制数据集中最后一个点。

示例

new Sparkline(
  data: data,
  pointsMode: PointsMode.all,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

example_points_all

new Sparkline(
  data: data,
  pointsMode: PointsMode.last,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

example_points_last

Fill

属性 默认值
fillMode FillMode.none
fillColor Colors.lightBlue[200]
fillGradient 空
FillMode 描述
无（默认） 不填充，只绘制sparkline。
above 填充sparkline上方的区域。
below 填充sparkline下方的区域。

示例

new Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillColor: Colors.red[200],
);

example_fill_below

new Sparkline(
  data: data,
  fillMode: FillMode.above,
  fillColor: Colors.red[200],
);

example_fill_above

new Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillGradient: new LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.red[800], Colors.red[200]],
  ),
);

example_fill_gradient

待办事项

  • [x] 简单的sparkline
  • [x] 自定义线宽
  • [x] 自定义线颜色
  • [x] 可选的圆角
  • [x] 填充
  • [x] 放大/更改单个点的颜色
  • [x] 不同的点模式 [所有/最后一个/无]
  • [ ] 在两个sparklines之间进行动画
  • [ ] 动画绘制单个sparkline
  • [ ] 手势检测器，用于选择最接近点击点的点
  • [ ] 基线
  • [x] 不同的填充模式 [上方/下方/无]
  • [x] 通过偏移lineWidth来修复边缘点溢出
  • [ ] 更好的圆角处理
  • [ ] 轴标签
  • [x] 线画笔上的渐变着色器
  • [x] 填充画笔上的渐变着色器
  • [ ] 在共享轴上绘制多个重叠的sparklines
  • [ ] 测试

GitHub

https://github.com/xqwzts/flutter_sparkline