Flutter图表绘制插件 flutter_charts 的使用

简介

flutter_charts 是一个用于在Flutter应用中绘制图表的插件。它支持多种类型的图表，如折线图和垂直柱状图，并提供了丰富的自定义选项。

安装

要将 flutter_charts 作为库包安装到您的应用程序中，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     flutter_charts: ^0.5.0
   

2. 运行 flutter pub get 命令以下载并安装该库。

3. 导入库并在您的代码中使用它：

   import 'package:flutter_charts/flutter_charts.dart';
   

示例代码

以下是一个完整的示例，展示了如何在Flutter应用程序中使用 flutter_charts 来绘制折线图和垂直柱状图。

主文件 main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Charts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Charts Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget chartToRun = createRandomDataLineChart();

  void _chartStateChanger() {
    setState(() {
      chartToRun = createRandomDataLineChart();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: _chartStateChanger,
              child: const Text('New Random Data'),
            ),
            Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Text('>>>'),
                  Expanded(child: chartToRun),
                  const Text('<<<'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget createRandomDataLineChart() {
    ChartData chartData = RandomChartData.generated(chartOptions: const ChartOptions());

    LineChartTopContainer lineChartContainer = LineChartTopContainer(
      chartData: chartData,
    );

    return LineChart(
      painter: LineChartPainter(
        lineChartContainer: lineChartContainer,
      ),
    );
  }
}

创建随机数据折线图

Widget createRandomDataLineChart() {
  ChartData chartData = RandomChartData.generated(chartOptions: const ChartOptions());

  LineChartTopContainer lineChartContainer = LineChartTopContainer(
    chartData: chartData,
  );

  return LineChart(
    painter: LineChartPainter(
      lineChartContainer: lineChartContainer,
    ),
  );
}

创建随机数据垂直柱状图

Widget createRandomDataVerticalBarChart() {
  ChartData chartData = RandomChartData.generated(chartOptions: const ChartOptions());

  VerticalBarChartTopContainer verticalBarChartContainer = VerticalBarChartTopContainer(
    chartData: chartData,
  );

  return VerticalBarChart(
    painter: VerticalBarChartPainter(
      verticalBarChartContainer: verticalBarChartContainer,
    ),
  );
}

创建带有标签布局策略的季节动物图表（折线图）

Widget createAnimalsBySeasonWithLabelLayoutStrategyLineChart() {
  LabelLayoutStrategy? xContainerLabelLayoutStrategy;
  ChartData chartData;
  ChartOptions chartOptions = const ChartOptions();

  xContainerLabelLayoutStrategy = DefaultIterativeLabelLayoutStrategy(
    options: chartOptions,
  );

  chartData = ChartData(
    dataRows: const [
      [10.0, 20.0, 5.0, 30.0, 5.0, 20.0],
      [30.0, 60.0, 16.0, 100.0, 12.0, 120.0],
      [25.0, 40.0, 20.0, 80.0, 12.0, 90.0],
      [12.0, 30.0, 18.0, 40.0, 10.0, 30.0],
    ],
    xUserLabels: const ['Wolf', 'Deer', 'Owl', 'Mouse', 'Hawk', 'Vole'],
    dataRowsLegends: const [
      'Spring',
      'Summer',
      'Fall',
      'Winter',
    ],
    chartOptions: chartOptions,
  );

  LineChartTopContainer lineChartContainer = LineChartTopContainer(
    chartData: chartData,
    xContainerLabelLayoutStrategy: xContainerLabelLayoutStrategy,
  );

  return LineChart(
    painter: LineChartPainter(
      lineChartContainer: lineChartContainer,
    ),
  );
}

创建带有负值的图表（折线图）

Widget createSomeNegativeValuesLineChart() {
  ChartData chartData;
  ChartOptions chartOptions = const ChartOptions();

  chartData = ChartData(
    dataRows: const [
      [2000.0, 1800.0, 2200.0, 2300.0, 1700.0, 1800.0],
      [1100.0, 1000.0, 1200.0, 800.0, 700.0, 800.0],
      [0.0, 100.0, -200.0, 150.0, -100.0, -150.0],
      [-800.0, -400.0, -300.0, -400.0, -200.0, -250.0],
    ],
    xUserLabels: const ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    dataRowsLegends: const [
      'Big Corp',
      'Medium Corp',
      'Print Shop',
      'Bar',
    ],
    chartOptions: chartOptions,
  );

  LineChartTopContainer lineChartContainer = LineChartTopContainer(
    chartData: chartData,
  );

  return LineChart(
    painter: LineChartPainter(
      lineChartContainer: lineChartContainer,
    ),
  );
}

结论

通过上述示例，您可以快速上手使用 flutter_charts 插件来创建各种类型的图表。根据您的需求，您可以进一步自定义图表的数据、样式和布局策略。希望这些示例对您有所帮助！