Flutter图表绘制插件charts_flutter_new的使用

charts_flutter_new 是一个用 Dart 编写的 Material Design 数据可视化库。它可以让你在 Flutter 应用程序中轻松创建各种图表。

支持的图表

支持的图表类型可以在 在线画廊 中查看。

使用该库

charts_flutter_new 的示例代码可以在 GitHub 仓库的 /example/ 文件夹中找到。

示例代码

以下是一个简单的示例，展示了如何在 Flutter 应用程序中使用 charts_flutter_new 插件来创建一个基本的柱状图。

// 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';
import 'app_config.dart';
import 'home.dart';

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

  @override
  GalleryAppState createState() => new GalleryAppState();
}

/// 主应用状态。
///
/// 控制性能覆盖，并实例化一个 [Home] 组件。
class GalleryAppState extends State<GalleryApp> {
  // 初始化应用设置。
  bool _showPerformanceOverlay = defaultConfig.showPerformanceOverlay;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: defaultConfig.appName,
        theme: defaultConfig.theme,
        showPerformanceOverlay: _showPerformanceOverlay,
        home: new Home(
          showPerformanceOverlay: _showPerformanceOverlay,
          onShowPerformanceOverlayChanged: (bool value) {
            setState(() {
              _showPerformanceOverlay = value;
            });
          },
        ));
  }
}

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

具体图表绘制示例

接下来展示一个具体的柱状图绘制示例：

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

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

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

  /// Creates a [BarChart] with sample data and no transition.
  factory SimpleBarChart.withSampleData() {
    return new SimpleBarChart(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }

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

  /// Create one series with sample hard coded data.
  static List<charts.Series<OrdinalSales, String>> _createSampleData() {
    final desktopSalesData = [
      new OrdinalSales('2014', 5),
      new OrdinalSales('2015', 25),
      new OrdinalSales('2016', 100),
      new OrdinalSales('2017', 75),
    ];

    final tableSalesData = [
      new OrdinalSales('2014', 25),
      new OrdinalSales('2015', 50),
      new OrdinalSales('2016', 75),
      new OrdinalSales('2017', 100),
    ];

    final mobileSalesData = [
      new OrdinalSales('2014', 10),
      new OrdinalSales('2015', 15),
      new OrdinalSales('2016', 50),
      new OrdinalSales('2017', 20),
    ];

    return [
      new charts.Series<OrdinalSales, String>(
        id: 'Desktop',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: desktopSalesData,
      ),
      new charts.Series<OrdinalSales, String>(
        id: 'Tablet',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: tableSalesData,
      ),
      new charts.Series<OrdinalSales, String>(
        id: 'Mobile',
        domainFn: (OrdinalSales sales, _) => sales.year,
        measureFn: (OrdinalSales sales, _) => sales.sales,
        data: mobileSalesData,
      )
    ];
  }
}

/// Sample ordinal data type.
class OrdinalSales {
  final String year;
  final int sales;

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

在这个示例中，我们定义了一个 SimpleBarChart 类，它接受一系列数据并生成一个柱状图。我们通过 _createSampleData 方法创建了三个系列的数据，每个系列代表不同设备类型的销售数据。BarChart 将这些数据渲染为柱状图。

运行示例

将上述代码添加到你的 Flutter 应用程序中，并确保你已经将 charts_flutter_new 添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  charts_flutter_new: ^0.12.0