Flutter图表绘制插件charts_common_maintained的使用

Common Charting Library

Charts_common_maintained 是一个用于绘制图表的Flutter插件。它提供了多种图表类型，如线图、柱状图、饼图等。本教程将演示如何在Flutter项目中使用该插件。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  charts_common_maintained: ^0.12.0

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

创建基本图表

接下来我们创建一个简单的折线图。

示例代码

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Charts Example')),
        body: Center(child: SimpleLineChart.withSampleData()),
      ),
    );
  }
}

/// 创建一个简单的折线图
class SimpleLineChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimpleLineChart(this.seriesList, {this.animate});

  /// 在这里创建数据源
  factory SimpleLineChart.withSampleData() {
    return new SimpleLineChart(
      _createSampleData(),
      // Set animation to true, since false is the default.
      animate: true,
    );
  }

  /// 创建数据点
  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final data = [
      LinearSales(0, 5),
      LinearSales(1, 25),
      LinearSales(2, 100),
      LinearSales(3, 75),
    ];

    return [
      charts.Series<LinearSales, int>(
        id: 'Sales',
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new charts.LineChart(
      seriesList,
      animate: animate,
    );
  }
}

/// 数据模型类
class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

运行效果

上述代码将创建一个简单的折线图，包含四个数据点（年份和销售额）。

更多图表类型

除了折线图，你还可以创建其他类型的图表，比如柱状图和饼图。以下是创建柱状图的例子：

示例代码

class SimpleBarChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimpleBarChart(this.seriesList, {this.animate});

  factory SimpleBarChart.withSampleData() {
    return new SimpleBarChart(
      _createSampleData(),
      animate: true,
    );
  }

  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final data = [
      OrdinalSales('2014', 5),
      OrdinalSales('2015', 25),
      OrdinalSales('2016', 100),
      OrdinalSales('2017', 75),
    ];

    return [
      charts.Series<OrdinalSales, String>(
        id: 'Sales',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: data,
      )
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,
    );
  }
}

/// 数据模型类
class OrdinalSales {
  final String year;
  final int sales;

  OrdinalSales(this.year, this.sales);
}