Flutter图表绘制插件relu_plot_lib的使用

Flutter图表绘制插件relu_plot_lib的使用

relu_plot_lib 是一个用于Flutter桌面应用程序的简单图表工具。

您可以添加多个图表，并使用您选择的小部件对其进行注释。通过鼠标操作，您可以导航和缩放图表，并使用十字线读取和比较图表值。

使用

要使用 relu_plot_lib，只需在您的 pubspec.yaml 文件中添加 relu_plot_lib 作为依赖项。

dependencies:
  relu_plot_lib: ^1.0.6

下面是一个简单的 relu_plot_lib 图表实现示例，该示例与上文中的视频演示一致。此代码也可以在 examples 文件夹中找到。

Plot(
  xTicks: Ticks(
    pretty: true, 
    logarithmic: true,
    unit: 'Hz',
    fractionDigits: 1,
  ),
  yTicks: Ticks(
    pretty: true, 
    unit: 'dB'
  ),
  graphs: [
    Graph(
      x: List<double>.generate(10000, (i) => i + 1.0), 
      y: List<double>.generate(10000, (i) => i + 1.0),
      color: Colors.blue,
      crosshairs: [
        Crosshair(
          width: 120,
          label: 'Crosshair', 
          yPadding: 20, 
          color: Colors.red,
        )
      ],
      annotations: [
        Annotation(
          width: 100,
          height: 100,
          child: const Card.filled(
            color: Colors.red,
            child: SizedBox(
              width: 100,
              height: 70,
              child: Center(
                child: Text(
                  'This is an annotation!', 
                  textAlign: TextAlign.center,
                )
              ),
            ),
          ),
        ),
      ]
    ),
  ],
)

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用 relu_plot_lib。

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

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

/// 这是一个示例应用，展示如何使用relu_plot_lib。
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'relu_plot_lib demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'relu_plot_lib demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
          child: Padding(
              padding: const EdgeInsets.all(10),
              child: Plot(
                xTicks: Ticks(
                  pretty: true,
                  logarithmic: true,
                  unit: 'Hz',
                  fractionDigits: 1,
                ),
                yTicks: Ticks(pretty: true, logarithmic: false, unit: 'dB'),
                graphs: [
                  Graph(
                    x: List<double>.generate(10000, (i) => i + 1.0),
                    y: List<double>.generate(10000, (i) => i + 1.0),
                    color: Colors.blue,
                    crosshairs: [
                      Crosshair(
                        width: 120,
                        label: 'Crosshair',
                        yPadding: 20,
                        color: Colors.red,
                      )
                    ],
                    annotations: [
                      Annotation(
                        width: 100,
                        height: 100,
                        child: const Card.filled(
                          color: Colors.red,
                          child: SizedBox(
                            width: 100,
                            height: 70,
                            child: Center(
                                child: Text(
                              'This is an annotation!',
                              textAlign: TextAlign.center,
                            )),
                          ),
                        ),
                      ),
                    ]),
                ],
              ))),
    );
  }
}