Flutter小型图表展示插件sparkline的使用

Flutter小型图表展示插件sparkline的使用

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  sparkline: ^0.6.0

然后运行 flutter pub get。

快速开始

首先，导入所需的包，并创建一个 Sparkline 组件。将数据传递给该组件即可生成图表。

import 'package:flutter/material.dart';
import 'package:sparkline/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,
            ),
          ),
        ),
      ),
    ),
  );
}

自定义

Sparkline

属性

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

示例

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

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

完整示例

以下是一个完整的示例，展示了如何生成随机数据并自定义 Sparkline 的样式。

import 'dart:math' as math;

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

math.Random random = new math.Random();

List<double> _generateRandomData(int count) {
  List<double> result = [];
  for (int i = 0; i < count; i++) {
    result.add(random.nextDouble() * 100);
  }
  return result;
}

void main() {
  var data = _generateRandomData(100);
  Color? lineColor = Colors.lightGreen[500];
  Color? fillColor = Colors.lightGreen[200];
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 100.0,
            child: new Sparkline(
              data: data,
              lineColor: lineColor,
              fillMode: FillMode.below,
              fillColor: fillColor,
              pointsMode: PointsMode.all,
              pointSize: 5.0,
              pointColor: Colors.amber,
            ),
          ),
        ),
      ),
    ),
  );
}

更多关于Flutter小型图表展示插件sparkline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter小型图表展示插件sparkline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用sparkline插件来展示小型图表的示例代码。sparkline是一个轻量级的图表库，非常适合在Flutter应用中展示简单的数据趋势。

首先，确保你已经在pubspec.yaml文件中添加了flutter_sparkline依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_sparkline: ^1.2.0  # 请确保版本号是最新的

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Dart文件中使用Sparkline组件来展示小型图表。以下是一个完整的示例代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sparkline Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SparklineDemo(),
    );
  }
}

class SparklineDemo extends StatelessWidget {
  final List<double> data = [
    3, 5, 8, 6, 2, 4, 7, 9, 1, 3, 6, 8, 5, 4, 3, 2, 1, 0.5, 0.3, 0.1
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sparkline Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Line Sparkline', style: TextStyle(fontSize: 20)),
            SizedBox(height: 16),
            Sparkline(
              data: data,
              lineColor: Colors.blue,
              pointsMode: PointsMode.all,
              pointSize: 5.0,
            ),
            SizedBox(height: 32),
            Text('Area Sparkline', style: TextStyle(fontSize: 20)),
            SizedBox(height: 16),
            Sparkline(
              data: data,
              lineColor: Colors.green,
              fillColor: Colors.green.withOpacity(0.3),
              pointsMode: PointsMode.some,
              pointSize: 8.0,
            ),
            SizedBox(height: 32),
            Text('Bar Sparkline', style: TextStyle(fontSize: 20)),
            SizedBox(height: 16),
            SparkBar(
              data: data,
              barWidth: 10,
              colors: [Colors.red, Colors.orange, Colors.yellow],
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了三种类型的Sparkline图表：

  1. Line Sparkline：使用Sparkline组件，通过data属性传递数据列表，并设置线条颜色和点的样式。
  2. Area Sparkline：同样使用Sparkline组件，但添加了填充颜色fillColor。
  3. Bar Sparkline：使用SparkBar组件，它专门用于展示条形图。

这些示例展示了如何使用flutter_sparkline插件在Flutter应用中轻松创建小型图表。你可以根据需要调整数据、颜色和样式属性，以满足你的具体需求。

回到顶部