Flutter可视化插件at_viz的使用

概述

at_viz 包是为希望构建美观且可定制图表和仪表盘的 Flutter 开发者设计的。

此开源包用 Dart 编写，并支持以下小部件：

SimpleRadialGauge

ScaleRadialGauge

SimpleLinearGauge

AtTimeSeriesLineChart

AtTimeSeriesBarChart

我们欢迎你提出建议来创建更多的图表或仪表，或者对已有的图表或仪表添加功能。

如何工作

设置

该包需要按如下方式导入：

import 'package:at_viz/at_charts/at_time_series_chart/lib/at_time_series_chart.dart';

import 'package:at_viz/at_gauges/linear_gauges/simple_linear_gauge.dart';
import 'package:at_viz/at_gauges/radial_gauges/scale_radial_gauge.dart';
import 'package:at_viz/at_gauges/radial_gauges/simple_radial_gauge.dart';

使用

确保你的源代码注释清晰且全面。

简单折线图示例

AtTimeSeriesChart.line(
  data: lineData,
  style: lineChartStyle,
  backgroundColor: Colors.white,
),

简单柱状图示例

AtTimeSeriesChart.bar(
  data: barData,
  style: barChartStyle,
  backgroundColor: Colors.white,
),

简单径向仪表示例

下面的代码片段展示了带有必需的 actualValue 和 maxValue 以及可选属性的简单仪表小部件。

SimpleRadialGauge(
  actualValue: 50,
  maxValue: 100,
  // 可选参数
  minValue: 0,
  title: Text('简单径向仪表'),
  titlePosition: TitlePosition.top,
  unit: 'L',
  icon: Icon(Icons.water),
  pointerColor: Colors.blue,
  decimalPlaces: 0,
  isAnimate: true,
  animationDuration: 2000,
  size: 400,
),

刻度径向仪表示例

下面的代码片段展示了带有必需的 actualValue 和 maxValue 以及可选属性的刻度仪表小部件。

ScaleRadialGauge(
  maxValue: 100,
  actualValue: 70,
  // 可选参数
  minValue: 0,
  size: 400,
  title: Text('刻度径向仪表'),
  titlePosition: TitlePosition.top,
  pointerColor: Colors.blue,
  needleColor: Colors.blue,
  decimalPlaces: 0,
  isAnimate: true,
  animationDuration: 2000,
  unit: TextSpan(text: 'Km/h', style: TextStyle(fontSize: 10)),
)

简单线性仪表示例

下面的代码片段展示了带有必需的 actualValue 和 maxValue 以及可选属性的简单线性仪表小部件。

SimpleLinearGauge(
  maxValue: 100,
  actualValue: 76,
  // 可选参数
  minValue: 0,
  divisions: 10,
  title: const Text('简单线性仪表'),
  titlePosition: TitlePosition.top,
  pointerColor: Colors.blue,
  pointerIcon: const Icon(Icons.water_drop, color: Colors.blue),
  decimalPlaces: 0,
  isAnimate: true,
  animationDuration: 2000,
  gaugeOrientation: GaugeOrientation.vertical,
  gaugeStrokeWidth: 5,
  rangeStrokeWidth: 5,
  majorTickStrokeWidth: 3,
  minorTickStrokeWidth: 3,
  actualValueTextStyle: const TextStyle(color: Colors.black, fontSize: 15),
  majorTickValueTextStyle: const TextStyle(color: Colors.black),
),

有关更多信息，请参阅示例标签或在 pub.dev 上列出的 API 文档。

开源使用和贡献

这是开源代码，所以你可以自由地使用它，提出更改或增强建议，或创建自己的版本。有关如何设置工具、测试并提交拉取请求的详细指导，请参阅 CONTRIBUTING.md。

维护人员

创建者：

• Curtly Critchlow
• SonLe

示例代码

import 'package:at_viz_example/screens/gauges.dart';
import 'package:at_viz_example/screens/time_series.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const ExampleBody();
  }
}

class ExampleBody extends StatefulWidget {
  const ExampleBody({super.key});

  [@override](/user/override)
  State<ExampleBody> createState() => _ExampleBodyState();
}

class _ExampleBodyState extends State<ExampleBody> {
  var _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  final List<Widget> _navigationBarBody = [
    const TimeSeriesChartExample(
      title: 'Charts example',
    ),
    const GaugesExample()
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.show_chart_sharp),
              label: 'Charts',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.radio_button_off_outlined),
              label: 'Gauges',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        ),
        body: _navigationBarBody[_selectedIndex],
      ),
    );
  }
}