Flutter图表绘制插件nimble_charts_common的使用

Flutter图表绘制插件nimble_charts_common的使用

该包是nimble_charts的一部分。这个包不依赖任何工具包，并包含共享代码。您可以使用此包来构建自己的图表 Flutter UI 库，甚至可以用于类似Jaspr的东西。以下是针对 Flutter 包的文档。

图表样例

该项目是对已停止维护的charts_flutter的复活。它旨在为 Flutter 开发者提供一个强大且灵活的图表包。 Nimblesite 现在维护此库。虽然包名已更改，但我们正在努力使此分支尽可能与原始版本兼容。

🚀 在线演示：请查看live WASM web app demo以查看图表的实际效果！

❓ 为什么有这个分支？

Dart 3、类型安全、测试和错误修复

类型安全和严格的测试确保了该包是可靠和可维护的。我们对代码应用了数千次自动和手动修复，以提高类型安全，并确保更难破坏此库。还添加了许多新的小部件测试，这意味着更改不应影响UI行为。

这个分支为未来的开发提供了最坚实的基础，我们将继续维护这个库。

请比较其他分支的pubspec.yaml文件、analysis_options.yaml文件和测试文件夹。差异显而易见。这个分支仅适用于 Dart 3 及以上版本，具有更好的类型安全性和空安全性。

📊 功能

  • 多种图表类型
  • 可定制的外观和行为
  • 完全原生的 Flutter 实现
  • 同时支持移动平台和 Web 平台
  • 改进的文档和广泛的示例

🛠️ 安装

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  nimble_charts: ^0.4.0-beta

📝 使用

这是一个带有基本折线图的完整应用程序。

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

// 定义一个类型别名
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<LinearSales, int>(
                      id: 'Sales', // 系列的标识符
                      colorFn: (_, __) => MaterialPalette.purple.shadeDefault, // 颜色函数
                      domainFn: (sales, _) => sales.year, // 域函数
                      measureFn: (sales, _) => sales.sales, // 测量函数
                      data: [ // 数据点
                        (year: 0, sales: 5),
                        (year: 1, sales: 25),
                        (year: 2, sales: 100),
                        (year: 3, sales: 75),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

对于更多示例和详细的文档，请参阅示例应用程序和文档。

⚖️ 许可证

本项目在 Apache 2.0 许可证下继续原始的 Google Charts 库。我们尊重原始许可证和归属声明。详情请参阅LICENSE 和AUTHORS 文件。我们感谢 Google 团队为此库所做的宝贵工作。

运行测试

示例应用程序有许多小部件测试。每个小部件测试都会生成黄金文件。这些黄金文件是在 Linux 上通过 GitHub 动作生成的，因此它们会始终与您的本地机器略有不同。如果您想在本地运行测试，需要运行以下命令：

flutter test --update-goldens

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

1 回复

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


当然，下面是一个关于如何使用Flutter图表绘制插件nimble_charts_common的代码案例。请注意，nimble_charts_common通常作为其他Nimble系列图表库（如nimble_chart_line、nimble_chart_bar等）的依赖项，它本身并不直接用于绘制图表，而是提供了一些共通的类型和工具。因此，我们将结合一个具体的Nimble图表库（例如nimble_chart_line）来展示如何使用这些插件。

首先，确保你的pubspec.yaml文件中已经包含了必要的依赖项：

dependencies:
  flutter:
    sdk: flutter
  nimble_chart_line: ^x.y.z  # 请替换为最新版本号
  nimble_charts_common: ^x.y.z  # nimble_chart_line 通常会自动包含这个依赖，但显式声明也无妨

然后，在你的Flutter项目中，你可以这样使用nimble_chart_line来绘制一个简单的折线图，同时利用nimble_charts_common中提供的类型（例如ChartDataPoint）：

import 'package:flutter/material.dart';
import 'package:nimble_chart_line/nimble_chart_line.dart';
import 'package:nimble_charts_common/nimble_charts_common.dart';

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

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

class MyHomePage extends StatelessWidget {
  // 示例数据
  final List<ChartDataPoint<double>> dataPoints = [
    ChartDataPoint(x: 0.0, y: 5.0),
    ChartDataPoint(x: 1.0, y: 15.0),
    ChartDataPoint(x: 2.0, y: 10.0),
    ChartDataPoint(x: 3.0, y: 25.0),
    ChartDataPoint(x: 4.0, y: 10.0),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nimble Line Chart'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: NimbleLineChart(
          dataPoints: dataPoints,
          xAxisConfig: NimbleAxisConfig(
            title: 'X Axis',
          ),
          yAxisConfig: NimbleAxisConfig(
            title: 'Y Axis',
          ),
          seriesConfigs: [
            NimbleSeriesConfig(
              color: Colors.blue,
              label: 'Series 1',
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们：

  1. 导入了nimble_chart_line和nimble_charts_common包。
  2. 创建了一个包含ChartDataPoint<double>的列表，这些点代表折线图上的数据。
  3. 在MyHomePage的build方法中，使用NimbleLineChart小部件来绘制折线图。
  4. 配置了X轴和Y轴的标题，以及系列的颜色和标签。

请注意，nimble_charts_common在这里的作用主要是提供了ChartDataPoint等通用类型，而nimble_chart_line则负责具体的图表绘制逻辑。如果你需要绘制其他类型的图表（如柱状图、饼图等），你可以类似地使用Nimble系列的其他图表库，并参考它们的文档进行配置。

回到顶部