关注我们

Flutter - Charts

图表是数据的图形表示，其中数据由线(line)，条(bar)，饼图(pie)等符号表示。在Flutter中，图表的行为与普通图表相同。无涯教程使用Flutter中的图表以图形方式表示数据，从而使用户能够以简单的方式理解它们。无涯教程还可以绘制一个图表来表示无涯教程的价值的上升和下降。

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

Line Chart
Bar Chart
Pie and Donut Chart

Line Chart

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

无涯教程可以使用它如下:

复制代码

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

Bar Chart

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

无涯教程网

无涯教程可以使用它如下:

复制代码

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

Pie or Donut Chart

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

无涯教程可以使用它如下:

复制代码

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());

/// 这个小部件是主要的应用小部件。
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;
            },
          ),
        ),
      ),
    );
  }
}