Flutter图表绘制插件stacked_chart的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter图表绘制插件stacked_chart的使用

stacked_chart 是一个用于创建堆叠柱状图的 Flutter 包,并且具有易于自定义的特点。

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行:

dependencies:
  stacked_chart:

然后在你的 Dart 文件中导入它:

import 'package:stacked_chart/stacked_chart.dart';

使用

首先,我们需要创建一个包含数据的类 BookingStatus。该类实现了 Comparable<BookingStatus> 接口,以便我们可以在数据中进行排序。

class BookingStatus extends ChartData<LabelData, int> implements Comparable<BookingStatus> {
  final DateTime dateTime;
  final Map<String, int> bookings;

  static Map<LabelData, int> convertBookingToMapOfLabelDataInt(Map<String, int> bookings) {
    final Map<LabelData, int> convertedData = {};
    bookings.entries.map((e) => convertedData.addAll({LabelData(e.key): e.value})).toList();
    return convertedData;
  }

  int get totalBookingCount => bookings.values.reduce((total, value) => total = total + value);

  BookingStatus({required this.dateTime, this.bookings = const {} })
      : super(labelWithValue: convertBookingToMapOfLabelDataInt(bookings), barLabel: dateTime.day.toString());

  [@override](/user/override)
  int compareTo(BookingStatus other) => dateTime.compareTo(other.dateTime);
}

接下来,我们创建一个包含随机数据的状态管理类 _WeeklyChartDemoState。此类会生成一周内每天的数据,并将其显示在一个堆叠柱状图中。

class WeeklyChartDemo extends StatefulWidget {
  const WeeklyChartDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  _WeeklyChartDemoState createState() => _WeeklyChartDemoState();
}

class _WeeklyChartDemoState extends State<WeeklyChartDemo> {
  final rng = Random();
  List<BookingStatus> weeklyStatus = [];

  [@override](/user/override)
  void initState() {
    createRandomWeeklyStatus();
    super.initState();
  }

  void createRandomWeeklyStatus() {
    weeklyStatus.clear();
    final List<BookingStatus> weeklyData = [];
    WeekDay.values.map(
      (day) => weeklyData.add(BookingStatus(
        dateTime: DateTime.now().add(Duration(days: day.index)),
        bookings: {
          'Unfilled booking': rng.nextInt(20),
          'Filled booking': rng.nextInt(20),
        },
      )),
    ).toList();
    setState(() {
      weeklyStatus = weeklyData;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StackedChart(
      data: weeklyStatus,
      size: const Size(300, 150),
      showLabel: true,
      enableShadow: true,
    );
  }
}

最后,在主应用文件中,我们将这些组件组合在一起,创建一个简单的 Flutter 应用程序。

import 'dart:math';

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

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

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stacked Chart'),
      ),
      body: Center(
        child: WeeklyChartDemo(),
      ),
    );
  }
}

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

1 回复

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


stacked_chart 是一个用于在 Flutter 中绘制堆叠图表的插件。堆叠图表通常用于显示多个数据系列的累积效果,每个系列的数据堆叠在前一个系列之上。以下是如何使用 stacked_chart 插件在 Flutter 中绘制堆叠图表的基本步骤。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 stacked_chart 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  stacked_chart: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 stacked_chart 包:

import 'package:stacked_chart/stacked_chart.dart';

3. 创建堆叠图表数据

stacked_chart 插件需要你将数据转换为 StackedChartData 对象。每个数据系列由 StackedChartSeries 表示,而每个数据点由 StackedChartPoint 表示。

List<StackedChartSeries> seriesList = [
  StackedChartSeries(
    name: 'Series 1',
    color: Colors.blue,
    points: [
      StackedChartPoint(x: 0, y: 10),
      StackedChartPoint(x: 1, y: 20),
      StackedChartPoint(x: 2, y: 30),
    ],
  ),
  StackedChartSeries(
    name: 'Series 2',
    color: Colors.green,
    points: [
      StackedChartPoint(x: 0, y: 15),
      StackedChartPoint(x: 1, y: 25),
      StackedChartPoint(x: 2, y: 35),
    ],
  ),
];

StackedChartData chartData = StackedChartData(seriesList);

4. 使用 StackedChart 组件

在你的 UI 中使用 StackedChart 组件来显示图表:

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stacked Chart Example'),
      ),
      body: Center(
        child: StackedChart(
          data: chartData,
          xAxisLabel: 'X Axis',
          yAxisLabel: 'Y Axis',
        ),
      ),
    );
  }
}

5. 运行应用

现在你可以运行你的 Flutter 应用,并查看堆叠图表的效果。

6. 自定义图表

StackedChart 组件提供了多个参数来自定义图表的外观,例如:

  • widthheight:图表的宽度和高度。
  • xAxisLabelyAxisLabel:X 轴和 Y 轴的标签。
  • legendPosition:图例的位置(例如 LegendPosition.topLegendPosition.bottom 等)。
  • showGridLines:是否显示网格线。
StackedChart(
  data: chartData,
  width: 300,
  height: 200,
  xAxisLabel: 'X Axis',
  yAxisLabel: 'Y Axis',
  legendPosition: LegendPosition.bottom,
  showGridLines: true,
);

7. 处理交互

你可以通过监听 onPointTapped 回调来处理用户点击图表数据点的交互:

StackedChart(
  data: chartData,
  onPointTapped: (series, point) {
    print('Tapped on ${series.name} at (${point.x}, ${point.y})');
  },
);
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!