Flutter动画图表插件 fl_animated_linechart 的使用

fl_animated_linechart 是一个用于Flutter的动画图表库，支持多种功能如日期时间轴、多Y轴、高亮选择、动画效果、图例添加等。本文将介绍如何在Flutter项目中使用该插件，并提供完整的示例代码。

主要特性

• 支持日期时间轴
• 多个Y轴，支持不同单位
• 高亮选择
• 图表动画
• 添加图例的可能性
• 支持水平和垂直标记线
• 测试超过3000个点的数据仍表现良好

支持的图表类型

• 折线图
• 区域图

使用步骤

首先，在您的pubspec.yaml文件中添加依赖：

dependencies:
  fl_animated_linechart: ^1.0.0

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

接下来，您可以按照以下示例创建一个包含折线图的应用程序。

示例代码

基础折线图

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一些示例数据
    Map<DateTime, double> line1 = {
      DateTime(2023, 1, 1): 50,
      DateTime(2023, 1, 2): 60,
      DateTime(2023, 1, 3): 70,
      DateTime(2023, 1, 4): 80,
      DateTime(2023, 1, 5): 90,
    };

    Map<DateTime, double> line2 = {
      DateTime(2023, 1, 1): 40,
      DateTime(2023, 1, 2): 50,
      DateTime(2023, 1, 3): 60,
      DateTime(2023, 1, 4): 70,
      DateTime(2023, 1, 5): 80,
    };

    LineChart lineChart = LineChart.fromDateTimeMaps([line1, line2], [Colors.green, Colors.blue]);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('基础折线图')),
        body: Container(
          child: Column(
            children: [
              Expanded(
                child: AnimatedLineChart(lineChart),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

带有标记线和图例的折线图

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    Map<DateTime, double> line1 = {
      DateTime(2023, 1, 1): 50,
      DateTime(2023, 1, 2): 60,
      DateTime(2023, 1, 3): 70,
      DateTime(2023, 1, 4): 80,
      DateTime(2023, 1, 5): 90,
    };

    LineChart lineChart = LineChart.fromDateTimeMaps([line1], [Colors.blue], ['C'], tapTextFontWeight: FontWeight.w400);

    lineChart.lines[0].isMarkerLine = true;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('带有标记线和图例的折线图')),
        body: Container(
          child: Column(
            children: [
              Expanded(
                child: AnimatedLineChart(
                  lineChart,
                  toolTipColor: Colors.white,
                  gridColor: Colors.black54,
                  textStyle: TextStyle(fontSize: 10, color: Colors.black54),
                  showMarkerLines: true,
                  legends: [
                    Legend(title: 'Critical', color: Colors.red, showLeadingLine: true),
                    Legend(title: 'Warning', color: Colors.yellow, icon: Icon(Icons.report_problem_rounded, size: 17, color: Colors.yellow)),
                  ],
                  legendsRightLandscapeMode: true,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

带有水平和垂直标记线、图标以及图例的折线图

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    Map<DateTime, double> line1 = {
      DateTime(2023, 1, 1): 50,
      DateTime(2023, 1, 2): 60,
      DateTime(2023, 1, 3): 70,
      DateTime(2023, 1, 4): 80,
      DateTime(2023, 1, 5): 90,
    };

    LineChart lineChart = LineChart.fromDateTimeMaps([line1], [Colors.blue], ['C'], tapTextFontWeight: FontWeight.w400);

    lineChart.lines[0].isMarkerLine = true;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('带有水平和垂直标记线、图标及图例的折线图')),
        body: Container(
          child: Column(
            children: [
              Expanded(
                child: AnimatedLineChart(
                  lineChart,
                  toolTipColor: Colors.white,
                  gridColor: Colors.black54,
                  textStyle: TextStyle(fontSize: 10, color: Colors.black54),
                  showMarkerLines: true,
                  legends: [
                    Legend(title: 'Critical', color: Colors.red),
                    Legend(title: 'Warning', color: Colors.yellow),
                  ],
                  verticalMarker: [
                    DateTime.parse('2023-01-03 12:00:00'),
                    DateTime.parse('2023-01-04 12:00:00')
                  ],
                  verticalMarkerColor: Colors.yellow,
                  verticalMarkerIcon: [
                    Icon(Icons.cancel_rounded, color: Colors.red),
                    Icon(Icons.check_circle_rounded, color: Colors.green),
                  ],
                  iconBackgroundColor: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}