Flutter图表绘制插件charts_common_new_gennissi的使用

在Flutter中，charts_common_new_gennissi 是一个非常强大的图表绘制库。它提供了多种图表类型，并且可以通过简单的配置来实现复杂的图表展示功能。

安装

首先，在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  charts_common_new_gennissi: ^x.x.x

然后运行以下命令以获取依赖：

flutter pub get

使用示例

线图 (Line Chart)

以下是一个简单的线图示例：

import 'package:flutter/material.dart';
import 'package:charts_common_new_gennissi/common/line_chart.dart' as charts;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Charts Example'),
        ),
        body: LineChartExample(),
      ),
    );
  }
}

class LineChartExample extends StatelessWidget {
  final List<charts.Series<LinearSales, int>> seriesList = [
    charts.Series(
      id: 'Sales',
      data: [
        LinearSales(year: 0, sales: 5),
        LinearSales(year: 1, sales: 25),
        LinearSales(year: 2, sales: 100),
        LinearSales(year: 3, sales: 75),
      ],
      domainFn: (LinearSales sales, _) => sales.year,
      measureFn: (LinearSales sales, _) => sales.sales,
    )
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        child: charts.LineChart(
          seriesList,
          animate: true,
        ),
      ),
    );
  }
}

class LinearSales {
  final int year;
  final int sales;

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

柱状图 (Bar Chart)

以下是一个简单的柱状图示例：

import 'package:flutter/material.dart';
import 'package:charts_common_new_gennissi/common/bar_chart.dart' as charts;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Charts Example'),
        ),
        body: BarChartExample(),
      ),
    );
  }
}

class BarChartExample extends StatelessWidget {
  final List<charts.Series<OrdinalSales, String>> seriesList = [
    charts.Series(
      id: 'Sales',
      data: [
        OrdinalSales('2014', 5),
        OrdinalSales('2015', 25),
        OrdinalSales('2016', 100),
        OrdinalSales('2017', 75),
      ],
      domainFn: (OrdinalSales sales, _) => sales.year,
      measureFn: (OrdinalSales sales, _) => sales.sales,
    )
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        child: charts.BarChart(
          seriesList,
          animate: true,
        ),
      ),
    );
  }
}

class OrdinalSales {
  final String year;
  final int sales;

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

饼图 (Pie Chart)

以下是一个简单的饼图示例：

import 'package:flutter/material.dart';
import 'package:charts_common_new_gennissi/common/pie_chart.dart' as charts;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Charts Example'),
        ),
        body: PieChartExample(),
      ),
    );
  }
}

class PieChartExample extends StatelessWidget {
  final List<charts.Series<Sales, String>> seriesList = [
    charts.Series(
      id: 'Sales',
      data: [
        Sales('2014', 5),
        Sales('2015', 25),
        Sales('2016', 100),
        Sales('2017', 75),
      ],
      domainFn: (Sales sales, _) => sales.year,
      measureFn: (Sales sales, _) => sales.sales,
    )
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        child: charts.PieChart(
          seriesList,
          animate: true,
        ),
      ),
    );
  }
}

class Sales {
  final String year;
  final int sales;

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