Flutter 图表

2025年3月17日 | 阅读 3 分钟

图表是数据的图形表示，其中数据由符号表示，例如线、条、饼图等。在 Flutter 中，图表的行为与普通图表相同。我们在 Flutter 中使用图表以图形方式表示数据，使用户能够以简单的方式理解它们。我们还可以绘制图表来表示值的上升和下降。图表可以轻松读取数据，并在我们需要时帮助我们了解每月或每年的表现。

Flutter 中支持的图表类型

Flutter 主要支持三种类型的图表，每种图表都带有多个配置选项。以下是在 Flutter 应用程序中使用的图表

折线图
柱状图
饼图和圆环图

折线图

折线图是使用线条连接各个数据点的图表。它以一系列数据点显示信息。它主要用于跟踪短时间和长时间内的变化。

我们可以如下使用它

LineChart(
  LineChartData(
    // write your logic
  ),
);

柱状图

它是使用矩形条表示分类数据的图表。它可以是水平或垂直的。

我们可以如下使用它

BarChart(
  BarChartData(
    // write your logic
  ),
);

饼图或圆环图

它是一个在圆形图中显示信息的图表。在此图中，圆被分成扇区，每个扇区显示百分比或比例数据。

我们可以如下使用它

PieChart(
  PieChartData(
    // write your logic
  ),
);

让我们借助一个例子来理解它。

示例

打开 IDE 并创建一个新的 Flutter 项目。接下来，打开项目，导航到 lib 文件夹，然后打开 pubspec.yaml 文件。在此文件中，我们需要添加图表依赖项。Flutter 提供了多个图表依赖项，在这里我们将使用 fl_chart 依赖项。因此，如下添加它

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.10.1 

添加依赖项后，单击屏幕左上角显示的获取包链接。现在，打开 main.dart 文件并将其替换为以下代码

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

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Chart Example'),
          backgroundColor: Colors.green
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LineCharts(),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                "Traffic Source Chart",
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.purple,
                      fontWeight: FontWeight.w700,
                      fontStyle: FontStyle.italic
                  )
              )
            ),
          ],
        ),
      ),
    );
  }
}

class LineCharts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const cutOffYValue = 0.0;
    const yearTextStyle =
    TextStyle(fontSize: 12, color: Colors.black);

    return SizedBox(
      width: 360,
      height: 250,
      child: LineChart(
        LineChartData(
          lineTouchData: LineTouchData(enabled: false),
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, 1),
                FlSpot(1, 1),
                FlSpot(2, 3),
                FlSpot(3, 4),
                FlSpot(3, 5),
                FlSpot(4, 4)
              ],
              isCurved: true,
              barWidth: 2,
              colors: [
                Colors.black,
              ],
              belowBarData: BarAreaData(
                show: true,
                colors: [Colors.lightBlue.withOpacity(0.5)],
                cutOffY: cutOffYValue,
                applyCutOffY: true,
              ),
              aboveBarData: BarAreaData(
                show: true,
                colors: [Colors.lightGreen.withOpacity(0.5)],
                cutOffY: cutOffYValue,
                applyCutOffY: true,
              ),
              dotData: FlDotData(
                show: false,
              ),
            ),
          ],
          minY: 0,
          titlesData: FlTitlesData(
            bottomTitles: SideTitles(
                showTitles: true,
                reservedSize: 5,
                textStyle: yearTextStyle,
                getTitles: (value) {
                  switch (value.toInt()) {
                    case 0:
                      return '2016';
                    case 1:
                      return '2017';
                    case 2:
                      return '2018';
                    case 3:
                      return '2019';
                    case 4:
                      return '2020';
                    default:
                      return '';
                  }
                }),
            leftTitles: SideTitles(
              showTitles: true,
              getTitles: (value) {
                return '\$ ${value + 100}';
              },
            ),
          ),
          axisTitleData: FlAxisTitleData(
              leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10),
              bottomTitle: AxisTitle(
                  showTitle: true,
                  margin: 10,
                  titleText: 'Year',
                  textStyle: yearTextStyle,
                  textAlign: TextAlign.right)),
          gridData: FlGridData(
            show: true,
            checkToShowHorizontalLine: (double value) {
              return value == 1 || value == 2 || value == 3 || value == 4;
            },
          ),
        ),
      ),
    );
  }
}

输出

当我们在设备或模拟器中运行应用程序时，我们将获得与以下屏幕截图类似的屏幕 UI

下一个主题Flutter 底部导航栏

Flutter 图表

Flutter 中支持的图表类型

折线图

柱状图

饼图或圆环图

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 图表

Flutter 中支持的图表类型

折线图

柱状图

饼图或圆环图

示例

相关帖子

Flutter Snackbar

Flutter 文本

Flutter 卡片

Flutter 复选框

Flutter 文本字段

Flutter Container

Flutter 进度条

Flutter 弹窗

Flutter 列表

Flutter 抽屉

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器