Flutter水平堆叠条形图插件staked_horizontal_bar_chart的使用

stacked_horizontal_bar_chart 是一个用于在 Flutter 中创建水平堆叠条形图的插件。它允许你轻松地创建带有多个数据系列的水平堆叠条形图。以下是如何使用这个插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 stacked_horizontal_bar_chart 插件的依赖：

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

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:stacked_horizontal_bar_chart/stacked_horizontal_bar_chart.dart';

3. 创建数据

你需要准备数据来绘制图表。每个条形图由多个部分组成，每个部分代表一个数据系列。

List<StackedBarModel> data = [
  StackedBarModel(
    label: "Category 1",
    sections: [
      BarSectionModel(value: 30, color: Colors.blue),
      BarSectionModel(value: 20, color: Colors.green),
      BarSectionModel(value: 10, color: Colors.red),
    ],
  ),
  StackedBarModel(
    label: "Category 2",
    sections: [
      BarSectionModel(value: 40, color: Colors.blue),
      BarSectionModel(value: 15, color: Colors.green),
      BarSectionModel(value: 25, color: Colors.red),
    ],
  ),
  StackedBarModel(
    label: "Category 3",
    sections: [
      BarSectionModel(value: 20, color: Colors.blue),
      BarSectionModel(value: 30, color: Colors.green),
      BarSectionModel(value: 10, color: Colors.red),
    ],
  ),
];

4. 使用 StackedHorizontalBarChart 组件

将 StackedHorizontalBarChart 组件添加到你的 UI 中，并传递数据给它。

class MyChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stacked Horizontal Bar Chart"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: StackedHorizontalBarChart(
          data: data,
          barHeight: 20.0, // 条形图的高度
          barSpacing: 10.0, // 条形图之间的间距
          showLabels: true, // 是否显示标签
          showValues: true, // 是否显示数值
          valueFormatter: (value) => "$value%", // 数值格式化
        ),
      ),
    );
  }
}

5. 运行应用

现在你可以运行你的 Flutter 应用，应该会看到一个水平堆叠条形图。

6. 自定义

你可以根据需要自定义图表的各个方面，例如颜色、高度、间距、标签和数值的显示等。

示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyChart(),
    );
  }
}

class MyChart extends StatelessWidget {
  final List<StackedBarModel> data = [
    StackedBarModel(
      label: "Category 1",
      sections: [
        BarSectionModel(value: 30, color: Colors.blue),
        BarSectionModel(value: 20, color: Colors.green),
        BarSectionModel(value: 10, color: Colors.red),
      ],
    ),
    StackedBarModel(
      label: "Category 2",
      sections: [
        BarSectionModel(value: 40, color: Colors.blue),
        BarSectionModel(value: 15, color: Colors.green),
        BarSectionModel(value: 25, color: Colors.red),
      ],
    ),
    StackedBarModel(
      label: "Category 3",
      sections: [
        BarSectionModel(value: 20, color: Colors.blue),
        BarSectionModel(value: 30, color: Colors.green),
        BarSectionModel(value: 10, color: Colors.red),
      ],
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stacked Horizontal Bar Chart"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: StackedHorizontalBarChart(
          data: data,
          barHeight: 20.0,
          barSpacing: 10.0,
          showLabels: true,
          showValues: true,
          valueFormatter: (value) => "$value%",
        ),
      ),
    );
  }
}