Flutter实时图表绘制插件real_time_chart的使用

Flutter实时图表绘制插件real_time_chart的使用

Real-time Chart 是一个用于显示带有灵活自定义选项的实时图表的Flutter包。

特性

• 在图表上显示实时数据
• 支持负值
• 根据最大值自动调整高度
• 可自定义颜色、轴标签和网格线

入门指南

要使用这个包，请在 pubspec.yaml 文件中添加 real_time_chart 作为依赖项。

dependencies:
  real_time_chart: ^0.0.1

使用方法

要显示实时图表，可以使用 RealTimeChart 小部件。以下是代码中的使用示例：

import 'package:real_time_chart/real_time_chart.dart';
import 'dart:math';

class RealTimeChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return RealTimeChart(
      stream: positiveDataStream(), // 数据流
      graphColor: Colors.red,       // 图表颜色
    );
  }
}

Stream<double> positiveDataStream() {
  return Stream.periodic(const Duration(milliseconds: 500), (_) {
    return Random().nextInt(300).toDouble(); // 每500毫秒生成一个随机数
  }).asBroadcastStream();
}

额外信息

该包提供了一种简单的解决方案，以图形格式显示实时数据。它支持正负值，并根据最大值自动调整图表的高度。

如果在使用包时遇到任何问题或错误，可以在issue tracker中提交问题。我们致力于快速且有帮助地回应任何问题或疑虑。

如果您希望为该包的发展做出贡献，我们欢迎拉取请求和其他任何形式的贡献。您的帮助和支持非常感谢！

完整示例Demo

以下是一个完整的示例程序，展示了如何在Flutter应用中使用 RealTimeGraph 小部件。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:real_time_chart/real_time_chart.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '实时图表演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '实时图表演示'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final stream = positiveDataStream();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: double.maxFinite,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 显示正数数据的实时图表
              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width * 0.8,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: RealTimeGraph(
                    stream: stream, // 数据流
                  ),
                ),
              ),

              // 显示点状正数数据的实时图表
              const SizedBox(height: 32),
              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width * 0.8,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: RealTimeGraph(
                    stream: stream,
                    displayMode: ChartDisplay.points, // 点状显示模式
                  ),
                ),
              ),

              // 显示包含负值的实时图表
              const SizedBox(height: 32),
              const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  '支持负值：',
                ),
              ),
              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width * 0.8,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: RealTimeGraph(
                    stream: stream.map((value) => value - 150), // 调整值使其包含负数
                    supportNegativeValuesDisplay: true, // 支持负值显示
                    xAxisColor: Colors.black12, // X轴颜色
                  ),
                ),
              ),

              // 显示点状包含负值的实时图表
              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width * 0.8,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: RealTimeGraph(
                    stream: stream.map((value) => value - 150),
                    supportNegativeValuesDisplay: true,
                    displayMode: ChartDisplay.points, // 点状显示模式
                    xAxisColor: Colors.black12,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Stream<double> positiveDataStream() {
    return Stream.periodic(const Duration(milliseconds: 500), (_) {
      return Random().nextInt(300).toDouble(); // 每500毫秒生成一个随机数
    }).asBroadcastStream();
  }
}