Flutter图表绘制插件nimble

Flutter图表绘制插件nimble_charts的使用

简介

nimble_charts 是 charts_flutter 的复活版本，由 Nimblesite 维护。它旨在为 Flutter 开发者提供一个强大且灵活的图表库。虽然包名发生了变化，但该库尽量保持与原版的兼容性。

主要特性

多种图表类型：支持折线图、柱状图、饼图等多种图表类型。
高度可定制：可以自定义图表的外观和行为。
Flutter 原生实现：完全基于 Flutter 实现，性能更优。
跨平台支持：支持移动设备和 Web 平台。
丰富的文档和示例：提供了详细的文档和大量的示例代码。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  nimble_charts: ^0.4.0-beta

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

使用示例

下面是一个完整的 Flutter 应用程序示例，展示了如何使用 nimble_charts 绘制一个简单的折线图。

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

// 定义数据类型
typedef LinearSales = ({int year, int sales});

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(24),
            child: ColoredBox(
              color: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: LineChart(
                  [
                    // 创建一个 Series 对象，用于定义图表的数据和样式
                    charts.Series<LinearSales, int>(
                      id: 'Sales', // 系列 ID
                      colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault, // 设置颜色
                      domainFn: (sales, _) => sales.year, // x 轴数据
                      measureFn: (sales, _) => sales.sales, // y 轴数据
                      data: [
                        (year: 0, sales: 5), // 数据点
                        (year: 1, sales: 25),
                        (year: 2, sales: 100),
                        (year: 3, sales: 75),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

代码说明

导入库：首先导入 flutter 和 nimble_charts 库。
定义数据类型：使用 typedef 定义一个 LinearSales 类型，包含 year 和 sales 两个字段。
创建应用程序：使用 MaterialApp 和 Scaffold 创建一个基本的应用程序结构。
绘制图表：使用 LineChart 组件绘制折线图，并通过 charts.Series 定义图表的数据和样式。
- id：系列的唯一标识符。
- colorFn：设置图表的颜色。
- domainFn：定义 x 轴的数据。
- measureFn：定义 y 轴的数据。
- data：实际的数据点。

许可证

该项目继续使用 Apache 2.0 许可证发布。感谢 Google 团队对原始库的贡献。

运行测试

nimble_charts 包含了大量的小部件测试，这些测试会生成“golden”文件（即标准截图）。由于这些文件是在 Linux 上生成的，因此与本地生成的文件可能会有细微差异。如果你想要在本地运行测试，可以使用以下命令更新 golden 文件：

flutter test --update-goldens

更多关于Flutter图表绘制插件nimble_charts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼•5 小时前作者

更多关于Flutter图表绘制插件nimble_charts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用Flutter图表绘制插件nimble_charts的示例代码。这个示例将展示如何使用nimble_charts来绘制一个简单的柱状图（Bar Chart）。

首先，确保你已经在pubspec.yaml文件中添加了nimble_charts依赖：

dependencies:
  flutter:
    sdk: flutter
  nimble_charts: ^0.x.x  # 请替换为最新版本号

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

接下来，在你的Flutter项目中创建一个简单的页面来展示柱状图。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:nimble_charts/charts/bar_chart.dart';
import 'package:nimble_charts/models/bar_data.dart';
import 'package:nimble_charts/models/bar_data_set.dart';
import 'package:nimble_charts/models/bar_entry.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nimble Charts Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BarChartExample(),
    );
  }
}

class BarChartExample extends StatelessWidget {
  final List<BarEntry> barEntries = [
    BarEntry(x: 'A', y: 50),
    BarEntry(x: 'B', y: 30),
    BarEntry(x: 'C', y: 80),
    BarEntry(x: 'D', y: 60),
  ];

  final BarDataSet barDataSet = BarDataSet(
    entries: barEntries,
    label: 'Data Set 1',
  );

  final List<BarDataSet> barDataSets = [barDataSet];

  final BarData barData = BarData(
    dataSets: barDataSets,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nimble Bar Chart Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          data: barData,
          description: 'Bar Chart Example',
          animationDuration: Duration(milliseconds: 1500),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

定义数据：我们创建了一个List<BarEntry>来存储柱状图的数据点，每个BarEntry包含一个x轴标签和一个y轴值。
创建数据集：我们使用这些数据点创建了一个BarDataSet，并为其设置了一个标签。
组合数据集：我们将这个数据集添加到一个List<BarDataSet>中，然后使用这个列表创建了一个BarData对象。
绘制图表：在BarChartExample组件中，我们使用BarChart小部件并传入BarData对象来绘制柱状图。

这个示例展示了如何使用nimble_charts来绘制一个简单的柱状图。你可以根据需要调整数据和样式来适应你的具体需求。nimble_charts提供了许多配置选项，允许你自定义图表的外观和行为，你可以查阅其官方文档以获取更多信息。

Flutter图表绘制插件nimble_charts的使用