Flutter贝塞尔曲线图表绘制插件bezier_chart_plus的使用

Bezier Chart Plus 是一个用于 Flutter 的美观且高度可交互和配置的贝塞尔线图小部件。这是对 bezier_chart 的更新版本，以支持 Dart 3 和最新的 Flutter 版本。原始版本可以在这里找到。

特性

多条贝塞尔线
支持数字和日期时间
支持手势如触摸、捏合/缩放、滚动
高度可定制

指令

长按并拖动以显示指示器
点击以隐藏指示器
当使用自定义以外的比例时，如果指示器不可见，可以通过捏合/缩放在 WEEKLY、MONTHLY、YEARLY 之间切换。

开始使用

你应该确保在你的 Flutter 项目中添加依赖项。

dependencies:
  bezier_chart_plus: ^0.0.1

然后运行 flutter packages upgrade 或在 IntelliJ 中更新包。

示例项目

在 example 文件夹中有一个示例项目。查看它。否则，继续阅读以开始使用。

使用方法

自定义数字

Widget sample1(BuildContext context) {
  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width * 0.9,
      child: BezierChart(
        bezierChartScale: BezierChartScale.CUSTOM,
        xAxisCustomValues: const [0, 5, 10, 15, 20, 25, 30, 35],
        series: const [
          BezierLine(
            data: const [
              DataPoint<double>(value: 10, xAxis: 0),
              DataPoint<double>(value: 130, xAxis: 5),
              DataPoint<double>(value: 50, xAxis: 10),
              DataPoint<double>(value: 150, xAxis: 15),
              DataPoint<double>(value: 75, xAxis: 20),
              DataPoint<double>(value: 0, xAxis: 25),
              DataPoint<double>(value: 5, xAxis: 30),
              DataPoint<double>(value: 45, xAxis: 35),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          backgroundColor: Colors.red,
          snap: false,
        ),
      ),
    ),
  );
}

自定义数字多线

Widget sample2(BuildContext context) {
  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        bezierChartScale: BezierChartScale.CUSTOM,
        xAxisCustomValues: const [0, 3, 10, 15, 20, 25, 30, 35],
        series: const [
          BezierLine(
            label: "Custom 1",
            data: const [
              DataPoint<double>(value: 10, xAxis: 0),
              DataPoint<double>(value: 130, xAxis: 5),
              DataPoint<double>(value: 50, xAxis: 10),
              DataPoint<double>(value: 150, xAxis: 15),
              DataPoint<double>(value: 75, xAxis: 20),
              DataPoint<double>(value: 0, xAxis: 25),
              DataPoint<double>(value: 5, xAxis: 30),
              DataPoint<double>(value: 45, xAxis: 35),
            ],
          ),
          BezierLine(
            lineColor: Colors.blue,
            lineStrokeWidth: 2.0,
            label: "Custom 2",
            data: const [
              DataPoint<double>(value: 5, xAxis: 0),
              DataPoint<double>(value: 50, xAxis: 5),
              DataPoint<double>(value: 30, xAxis: 10),
              DataPoint<double>(value: 30, xAxis: 15),
              DataPoint<double>(value: 50, xAxis: 20),
              DataPoint<double>(value: 40, xAxis: 25),
              DataPoint<double>(value: 10, xAxis: 30),
              DataPoint<double>(value: 30, xAxis: 35),
            ],
          ),
          BezierLine(
            lineColor: Colors.black,
            lineStrokeWidth: 2.0,
            label: "Custom 3",
            data: const [
              DataPoint<double>(value: 5, xAxis: 0),
              DataPoint<double>(value: 10, xAxis: 5),
              DataPoint<double>(value: 35, xAxis: 10),
              DataPoint<double>(value: 40, xAxis: 15),
              DataPoint<double>(value: 40, xAxis: 20),
              DataPoint<double>(value: 40, xAxis: 25),
              DataPoint<double>(value: 9, xAxis: 30),
              DataPoint<double>(value: 11, xAxis: 35),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 2.0,
          verticalIndicatorColor: Colors.black12,
          showVerticalIndicator: true,
          contentWidth: MediaQuery.of(context).size.width * 2,
          backgroundColor: Colors.red,
        ),
      ),
    ),
  );
}

每周图表

Widget sample3(BuildContext context) {
  final fromDate = DateTime(2019, 05, 22);
  final toDate = DateTime.now();

  final date1 = DateTime.now().subtract(Duration(days: 2));
  final date2 = DateTime.now().subtract(Duration(days: 3));

  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        fromDate: fromDate,
        bezierChartScale: BezierChartScale.WEEKLY,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            onMissingValue: (dateTime) {
              if (dateTime.day.isEven) {
                return 10.0;
              }
              return 5.0;
            },
            data: [
              DataPoint<DateTime>(value: 10, xAxis: date1),
              DataPoint<DateTime>(value: 50, xAxis: date2),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundColor: Colors.red,
          footerHeight: 30.0,
        ),
      ),
    ),
  );
}

每月图表

Widget sample4(BuildContext context) {
  final fromDate = DateTime(2018, 11, 22);
  final toDate = DateTime.now();

  final date1 = DateTime.now().subtract(Duration(days: 2));
  final date2 = DateTime.now().subtract(Duration(days: 3));

  final date3 = DateTime.now().subtract(Duration(days: 35));
  final date4 = DateTime.now().subtract(Duration(days: 36));

  final date5 = DateTime.now().subtract(Duration(days: 65));
  final date6 = DateTime.now().subtract(Duration(days: 64));

  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        bezierChartScale: BezierChartScale.MONTHLY,
        fromDate: fromDate,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            onMissingValue: (dateTime) {
              if (dateTime.month.isEven) {
                return 10.0;
              }
              return 5.0;
            },
            data: [
              DataPoint<DateTime>(value: 10, xAxis: date1),
              DataPoint<DateTime>(value: 50, xAxis: date2),
              DataPoint<DateTime>(value: 20, xAxis: date3),
              DataPoint<DateTime>(value: 80, xAxis: date4),
              DataPoint<DateTime>(value: 14, xAxis: date5),
              DataPoint<DateTime>(value: 30, xAxis: date6),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundColor: Colors.red,
          footerHeight: 30.0,
        ),
      ),
    ),
  );
}

每年图表

Widget sample5(BuildContext context) {
  final fromDate = DateTime(2012, 11, 22);
  final toDate = DateTime.now();

  final date1 = DateTime.now().subtract(Duration(days: 2));
  final date2 = DateTime.now().subtract(Duration(days: 3));

  final date3 = DateTime.now().subtract(Duration(days: 300));
  final date4 = DateTime.now().subtract(Duration(days: 320));

  final date5 = DateTime.now().subtract(Duration(days: 650));
  final date6 = DateTime.now().subtract(Duration(days: 652));

  return Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        bezierChartScale: BezierChartScale.YEARLY,
        fromDate: fromDate,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            onMissingValue: (dateTime) {
              if (dateTime.year.isEven) {
                return 20.0;
              }
              return 5.0;
            },
            data: [
              DataPoint<DateTime>(value: 10, xAxis: date1),
              DataPoint<DateTime>(value: 50, xAxis: date2),
              DataPoint<DateTime>(value: 100, xAxis: date3),
              DataPoint<DateTime>(value: 100, xAxis: date4),
              DataPoint<DateTime>(value: 40, xAxis: date5),
              DataPoint<DateTime>(value: 47, xAxis: date6),
            ],
          ),
          BezierLine(
            label: "Flight",
            lineColor: Colors.black26,
            onMissingValue: (dateTime) {
              if (dateTime.month.isEven) {
                return 10.0;
              }
              return 3.0;
            },
            data: [
              DataPoint<DateTime>(value: 20, xAxis: date1),
              DataPoint<DateTime>(value: 30, xAxis: date2),
              DataPoint<DateTime>(value: 150, xAxis: date3),
              DataPoint<DateTime>(value: 80, xAxis: date4),
              DataPoint<DateTime>(value: 45, xAxis: date5),
              DataPoint<DateTime>(value: 45, xAxis: date6),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundGradient: LinearGradient(
            colors: [
              Colors.red[300],
              Colors.red[400],
              Colors.red[400],
              Colors.red[500],
              Colors.red,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          footerHeight: 30.0,
        ),
      ),
    ),
  );
}

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

itying888 1楼

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

bezier_chart_plus 是一个用于在 Flutter 中绘制贝塞尔曲线图表的插件。它是 bezier_chart 的升级版，提供了更多的自定义选项和更好的性能。以下是如何使用 bezier_chart_plus 插件的基本步骤：

1. 添加依赖项

首先，在 pubspec.yaml 文件中添加 bezier_chart_plus 依赖项：

dependencies:
  flutter:
    sdk: flutter
  bezier_chart_plus: ^2.0.0

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

2. 导入包

在你的 Dart 文件中导入 bezier_chart_plus 包：

import 'package:bezier_chart_plus/bezier_chart_plus.dart';

3. 创建数据

bezier_chart_plus 使用 DataPoint 来表示图表中的每个数据点。你需要创建一个 List<DataPoint> 来表示你的数据：

List<DataPoint<DateTime>> data = [
  DataPoint<DateTime>(value: 10, xAxis: DateTime(2023, 1, 1)),
  DataPoint<DateTime>(value: 20, xAxis: DateTime(2023, 2, 1)),
  DataPoint<DateTime>(value: 30, xAxis: DateTime(2023, 3, 1)),
  DataPoint<DateTime>(value: 40, xAxis: DateTime(2023, 4, 1)),
  DataPoint<DateTime>(value: 50, xAxis: DateTime(2023, 5, 1)),
];

4. 创建 BezierChart 组件

使用 BezierChart 组件来绘制图表。你可以通过 BezierChart 的构造函数来配置图表的样式、数据等：

BezierChart(
  fromDate: DateTime(2023, 1, 1),
  toDate: DateTime(2023, 5, 1),
  bezierChartScale: BezierChartScale.MONTHLY,
  series: [
    BezierLine(
      lineColor: Colors.blue,
      data: data,
      lineStrokeWidth: 3.0,
    ),
  ],
  xAxisLabel: "Date",
  yAxisLabel: "Value",
  footerBuilder: (_, __) => Text("2023"),
);

5. 配置图表样式

你可以通过 BezierChart 的各种属性来配置图表的样式，例如：

bezierChartScale: 设置图表的缩放级别（如 MONTHLY, WEEKLY, DAILY 等）。
series: 设置图表的数据系列。
xAxisLabel 和 yAxisLabel: 设置 X 轴和 Y 轴的标签。
footerBuilder: 自定义图表底部的显示内容。

6. 运行应用

将 BezierChart 组件添加到你的 Flutter 应用中的某个页面，然后运行应用即可看到绘制的贝塞尔曲线图表。

完整示例

以下是一个完整的示例代码：

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

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

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

class BezierChartExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<DataPoint<DateTime>> data = [
      DataPoint<DateTime>(value: 10, xAxis: DateTime(2023, 1, 1)),
      DataPoint<DateTime>(value: 20, xAxis: DateTime(2023, 2, 1)),
      DataPoint<DateTime>(value: 30, xAxis: DateTime(2023, 3, 1)),
      DataPoint<DateTime>(value: 40, xAxis: DateTime(2023, 4, 1)),
      DataPoint<DateTime>(value: 50, xAxis: DateTime(2023, 5, 1)),
    ];

    return Container(
      height: 300,
      child: BezierChart(
        fromDate: DateTime(2023, 1, 1),
        toDate: DateTime(2023, 5, 1),
        bezierChartScale: BezierChartScale.MONTHLY,
        series: [
          BezierLine(
            lineColor: Colors.blue,
            data: data,
            lineStrokeWidth: 3.0,
          ),
        ],
        xAxisLabel: "Date",
        yAxisLabel: "Value",
        footerBuilder: (_, __) => Text("2023"),
      ),
    );
  }
}