Flutter图表绘制插件Charthub的使用

在您的Flutter应用中轻松创建令人惊叹且交互式的图表。通过Charthub插件，您可以选择三种图表类型——折线图、柱状图和饼图，并让您的数据生动起来。Charthub使图表制作变得简单且灵活，让您能够专注于向用户传递有意义的洞察。

我们将在未来添加动画效果，使其更加吸引人。

使用

要使用此插件，请在pubspec.yaml文件中添加charthub作为依赖项。

功能

• 易于使用：快速集成美观的图表。
• 图表类型：可以选择折线图、柱状图或饼图。
• 数据可视化：将您的数据转化为引人注目的视觉效果。
• 自定义：可以自定义图表以匹配应用的设计风格。
• 动画（即将推出）：通过图表动画增强用户体验。
• 面向未来：随着我们不断扩展，您将拥有更多强大的图表功能。

开始使用

安装

dependencies:
  charthub: 1.0.0

导入包

import 'package:charthub/pieChart.dart';
import 'package:charthub/lineChart.dart';
import 'package:charthub/barChart.dart';

示例代码

折线图

LineChart(
  size: 200, // 图表的大小
  items: [23, 45, 12, 60, 44, 10, 54, 34, 23], // 数据点
)

饼图

PieChart(
  size: 200, // 图表的大小
  items: [30, 22, 43, 12, 56, 70], // 数据点
)

柱状图

BarChart(
  size: 200, // 图表的大小
  items: [100, 40, 300, 50, 450], // 数据点
)

示例代码详细说明

import 'package:charthub/pieChart.dart';
import 'package:flutter/material.dart';
import 'package:charthub/lineChart.dart';
import 'package:charthub/barChart.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
            'ChartHub',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: 20), // 空白区域
              Text(
                '折线图',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20), // 空白区域
              LineChart(
                size: Get.width - 20, // 图表宽度为屏幕宽度减去20
                items: [23, 45, 12, 60, 44, 10, 54, 34, 23], // 数据点
              ),
              SizedBox(height: 40), // 空白区域
              Text(
                '饼图',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 120), // 空白区域
              PieChart(
                size: Get.width / 2, // 图表宽度为屏幕宽度的一半
                items: [30, 22, 43, 12, 56, 70], // 数据点
              ),
              SizedBox(height: 120), // 空白区域
              SizedBox(height: 20), // 空白区域
              Text(
                '柱状图',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20), // 空白区域
              BarChart(
                size: Get.width - 20, // 图表宽度为屏幕宽度减去20
                items: [100, 40, 300, 50, 450], // 数据点
              ),
              SizedBox(height: 100), // 空白区域
            ],
          ),
        ),
      ),
    );
  }
}