Flutter图表绘制插件charts_common_updated的使用

在Flutter应用中，charts_common_updated 插件是一个非常强大的工具，用于创建各种类型的图表。本指南将展示如何使用该插件来创建一个简单的柱状图。

准备工作

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

dependencies:
  flutter:
    sdk: flutter
  charts_common_updated: ^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
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('柱状图示例'),
        ),
        body: Center(
          child: SimpleBarChart.withSampleData(),
        ),
      ),
    );
  }
}

/// 创建一个简单的柱状图
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: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,
      // 配置柱状图样式
      barRendererDecorator: new charts.BarLabelDecorator<String>(),
      domainAxis: new charts.OrdinalAxisSpec(
        renderSpec: new charts.SmallTickRendererSpec(labelRotation: 60),
      ),
    );
  }

  /// 创建数据
  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),
    ];

    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,
      )
    ];
  }
}

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

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

代码解释

1. 导入依赖：

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

2. 创建主应用：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('柱状图示例'),
           ),
           body: Center(
             child: SimpleBarChart.withSampleData(),
           ),
         ),
       );
     }
   }
   

3. 定义柱状图类：

   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: false,
       );
     }
   
     @override
     Widget build(BuildContext context) {
       return new charts.BarChart(
         seriesList,
         animate: animate,
         barRendererDecorator: new charts.BarLabelDecorator<String>(),
         domainAxis: new charts.OrdinalAxisSpec(
           renderSpec: new charts.SmallTickRendererSpec(labelRotation: 60),
         ),
       );
     }
   
     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),
       ];
   
       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,
         )
       ];
     }
   }
   

4. 数据模型类：

   class OrdinalSales {
     final String year;
     final int sales;
   
     OrdinalSales(this.year, this.sales);
   }