Flutter图表绘制插件stack_chart的使用

Flutter图表绘制插件stack_chart的使用

特性

• 使用此stack_chart包，您可以创建自己的自定义动态堆叠图以展示预订状态和其他数据格式，从而以更好的方式呈现您的分析。

开始使用

• 轻松下载flutter包stack_chart用于您的项目。

如何使用？

import 'package:stack_chart/stack_chart.dart';

小部件使用

MacStackChart(
    chartTitle: "Bookings Stack Chart",
    dateFormat: "h a",
    chartData: chartData,
    chartLabel: chartLabel,
    containerHeight: MediaQuery.of(context).size.height * 0.035,
    containerWidth: MediaQuery.of(context).size.width * 0.05,
    chartText: chartText,
    backgroundColor: Colors.transparent,
    chartBackgroundColor: Colors.white,
    style: const TextStyle(
    color: Colors.black,
    fontSize: 12,
    ),
)

示例

完整示例代码

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

/// 主函数运行MacStackedChart小部件作为应用程序的根。
void main() {
  runApp(const MacStackedChart());
}

/// MacStackedChart类是应用程序的根小部件。
class MacStackedChart extends StatelessWidget {
  const MacStackedChart({super.key});

  /// 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Macincode Stack Chart',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  /// MyHomePage类的默认构造函数
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<ChartData> chartData = [
    ChartData("2023-02-12 10:00:00", "2023-02-12 11:00:00", [
      "male",
      "female",
      "male",
      "female",
      "transgender",
      "transgender",
    ]),
    ChartData("2023-02-12 11:00:00", "2023-02-12 12:00:00", [
      "male",
      "female",
      "female",
      "transgender",
      "male",
      "transgender",
    ]),
    ChartData("2023-02-12 12:00:00", "2023-02-12 13:00:00", [
      "male",
      "female",
      "transgender",
      "female",
      "male",
      "transgender",
    ]),
    ChartData("2023-02-12 13:00:00", "2023-02-12 14:00:00", [
      "male",
      "transgender",
      "female",
      "male",
      "female",
      "transgender",
    ]),
    ChartData("2023-02-12 14:00:00", "2023-02-12 15:00:00", [
      "male",
      "female",
      "female",
      "transgender",
      "male",
      "transgender",
    ]),
    ChartData("2023-02-12 15:00:00", "2023-02-12 16:00:00", [
      "male",
      "female",
      "transgender",
      "transgender",
      "male",
      "female",
    ]),
  ];

  /// 创建一个包含标签文本和颜色的ChartLabel对象列表。
  List<ChartLabel> chartLabel = [
    ChartLabel("Male", Colors.red),
    ChartLabel("Female", Colors.green),
    ChartLabel("Transgender", Colors.yellow),
  ];

  ChartText chartText = ChartText("10 Minutes", Colors.amber);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MacStackChart(
              chartTitle: "Stack Chart",
              dateFormat: "h a",
              chartData: chartData,
              chartLabel: chartLabel,
              containerHeight: MediaQuery.of(context).size.height * 0.035,
              containerWidth: MediaQuery.of(context).size.width * 0.05,
              chartText: chartText,
              backgroundColor: Colors.transparent,
              chartBackgroundColor: Colors.white,
              style: const TextStyle(
                color: Colors.black,
                fontSize: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }
}