Flutter图表绘制插件charts_common_sa的使用

Common Charting Library

charts_common_sa 是一个用于在 Flutter 应用中绘制图表的库。通过该库，你可以轻松地创建各种类型的图表，如折线图、柱状图等。

开发

此项目是在 Google 内部开发并发布的，目前不接受外部贡献。

示例代码

以下是一个简单的示例，展示如何使用 charts_common_sa 插件在 Flutter 中绘制折线图。

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

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

class MyApp extends StatelessWidget {
  @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(),
      // 设置为 true 以启用动画效果
      animate: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new charts.LineChart(
      seriesList,
      // 配置图表的其他属性
      animate: animate,
    );
  }

  /// 创建折线图的数据源
  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final data = [
      LinearSales(0, 10),
      LinearSales(1, 5),
      LinearSales(2, 15),
      LinearSales(3, 20),
      LinearSales(4, 10),
      LinearSales(5, 20),
      LinearSales(6, 15),
      LinearSales(7, 10),
    ];

    return [
      new charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        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);
}

代码解释

• 导入必要的包：

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

• 定义主应用：

  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @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(),
        animate: false,
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return new charts.LineChart(
        seriesList,
        animate: animate,
      );
    }
  
    static List<charts.Series<LinearSales, int>> _createSampleData() {
      final data = [
        LinearSales(0, 10),
        LinearSales(1, 5),
        LinearSales(2, 15),
        LinearSales(3, 20),
        LinearSales(4, 10),
        LinearSales(5, 20),
        LinearSales(6, 15),
        LinearSales(7, 10),
      ];
  
      return [
        new charts.Series<LinearSales, int>(
          id: 'Sales',
          colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
          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);
  }