Flutter图表绘制插件charts_common_new的使用

charts_common_new 是一个用于在 Flutter 应用中绘制图表的库。它提供了丰富的图表组件，可以帮助开发者快速地实现各种类型的图表。

开始使用

首先，你需要将 charts_common_new 添加到你的项目依赖中。打开 pubspec.yaml 文件并添加以下内容：

dependencies:
  charts_common_new: ^0.12.0

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

基本示例

接下来，我们将通过一个简单的例子来展示如何使用 charts_common_new 绘制折线图。

示例代码

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

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

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

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

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

/// Sample linear data type.
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 = [
        new LinearSales(0, 5),
        new LinearSales(1, 25),
        new LinearSales(2, 100),
        new LinearSales(3, 75),
      ];
  
      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);
  }