Flutter图表绘制插件charts_flutter_maintained的使用

Flutter图表库

Material Design数据可视化库，用Dart语言原生编写。

支持的图表

查看在线画廊。

使用库

charts_flutter项目中的/example/文件夹包含一个完整的Flutter应用程序，其中有许多演示示例。

开发

该项目在Google内部开发，并发布供外部使用。欢迎对本包感兴趣的人参与贡献！

完整示例Demo

以下是一个完整的Flutter应用示例，展示了如何使用charts_flutter_maintained插件来绘制图表。

// Copyright 2018 the Charts project authors. Please see the AUTHORS file
// for details.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import 'package:flutter/material.dart';

/// 主图库应用小部件。
class GalleryApp extends StatefulWidget {
  GalleryApp({Key? key}) : super(key: key);

  [@override](/user/override)
  GalleryAppState createState() => new GalleryAppState();
}

/// 主图库应用状态。
///
/// 控制性能覆盖，并实例化一个Home小部件。
class GalleryAppState extends State<GalleryApp> {
  // 初始化应用设置。
  bool _showPerformanceOverlay = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Charts Flutter Maintained Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      showPerformanceOverlay: _showPerformanceOverlay,
      home: Home(
        showPerformanceOverlay: _showPerformanceOverlay,
        onShowPerformanceOverlayChanged: (bool value) {
          setState(() {
            _showPerformanceOverlay = value;
          });
        },
      ),
    );
  }
}

void main() {
  runApp(new GalleryApp());
}

/// 主页小部件。
class Home extends StatelessWidget {
  final bool showPerformanceOverlay;
  final Function(bool) onShowPerformanceOverlayChanged;

  Home({
    required this.showPerformanceOverlay,
    required this.onShowPerformanceOverlayChanged,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Charts Flutter Maintained Demo'),
        actions: [
          Switch(
            value: showPerformanceOverlay,
            onChanged: (value) {
              onShowPerformanceOverlayChanged(value);
            },
          ),
        ],
      ),
      body: Center(
        child: SimpleLineChart.withSampleData(),
      ),
    );
  }
}

/// 简单折线图。
class SimpleLineChart extends StatelessWidget {
  final List<Series<dynamic, num>> seriesList;
  final bool animate;

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new charts.LineChart(
      seriesList,
      animate: animate,
      behaviors: [
        new charts.ChartTitle(
          'Time',
          behaviorPosition: charts.BehaviorPosition.bottom,
          titleOutsideJustification:
              charts.OutsideJustification.middleDrawArea,
        ),
        new charts.ChartTitle(
          'Sales',
          behaviorPosition: charts.BehaviorPosition.start,
          titleOutsideJustification:
              charts.OutsideJustification.middleDrawArea,
        ),
      ],
    );
  }

  /// Create one series with sample hard coded data.
  static List<Series<LinearSales, int>> _createSampleData() {
    final data = [
      LinearSales(0, 5),
      LinearSales(1, 25),
      LinearSales(2, 100),
      LinearSales(3, 75),
    ];

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

/// 线性销售数据类。
class LinearSales {
  final int year;
  final int sales;

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