Flutter简单条形图绘制插件unique_simple_bar_chart的使用
Flutter简单条形图绘制插件 unique_simple_bar_chart 的使用
unique_simple_bar_chart 是一个简单的条形图绘制插件，可以帮助你快速生成单一风格的条形图。你可以轻松地更改颜色或大小。
安装插件
在你的 pubspec.yaml 文件中添加以下依赖：
dependencies:
unique_simple_bar_chart: ^0.0.1
然后运行 flutter pub get 来安装插件。
示例代码
单一水平条形图示例
以下是一个简单的示例，展示了如何创建带有单一水平条形图的图表：
import 'package:flutter/material.dart';
import 'package:unique_simple_bar_chart/data_models.dart';
import 'package:unique_simple_bar_chart/simple_bar_chart.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
home: SimpleBarChatScreen(),
);
}
}
class SimpleBarChatScreen extends StatelessWidget {
const SimpleBarChatScreen({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SimpleBarChart(
listOfHorizontalBarData: [
HorizontalDetailsModel(
name: '1',
color: const Color(0xFFEB7735),
size: 73,
),
HorizontalDetailsModel(
name: '2',
color: const Color(0xFFEB7735),
size: 92,
),
HorizontalDetailsModel(
name: '3',
color: const Color(0xFFFBBC05),
size: 120,
),
HorizontalDetailsModel(
name: '4',
color: const Color(0xFFFBBC05),
size: 86,
),
HorizontalDetailsModel(
name: '5',
color: const Color(0xFFFBBC05),
size: 64,
),
HorizontalDetailsModel(
name: '6',
color: const Color(0xFFFBBC05),
size: 155,
),
HorizontalDetailsModel(
name: '7',
color: const Color(0xFFFBBC05),
size: 200,
),
HorizontalDetailsModel(
name: '8',
color: const Color(0xFFFBBC05),
size: 250,
),
HorizontalDetailsModel(
name: '9',
color: const Color(0xFFFBBC05),
size: 200,
),
HorizontalDetailsModel(
name: '10',
color: const Color(0xFFFBBC05),
size: 160,
),
HorizontalDetailsModel(
name: '11',
color: const Color(0xFFFBBC05),
size: 180,
),
HorizontalDetailsModel(
name: '12',
color: const Color(0xFFFBBC05),
size: 60,
),
],
verticalInterval: 100,
),
),
);
}
}
双重水平条形图示例
如果你需要创建带有双重水平条形图的图表，可以设置 makeItDouble 参数为 true：
class SimpleBarChatScreenTwo extends StatelessWidget {
const SimpleBarChatScreenTwo({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SimpleBarChart(
makeItDouble: true,
listOfHorizontalBarData: [
HorizontalDetailsModel(
name: 'Mon',
color: const Color(0xFFEB7735),
size: 73,
sizeTwo: 40,
colorTwo: Colors.blue,
),
HorizontalDetailsModel(
name: 'Tues',
color: const Color(0xFFEB7735),
size: 92,
sizeTwo: 85,
colorTwo: Colors.blue,
),
HorizontalDetailsModel(
name: 'Wed',
color: const Color(0xFFFBBC05),
size: 120,
sizeTwo: 100,
colorTwo: Colors.blue,
),
HorizontalDetailsModel(
name: 'Thurs',
color: const Color(0xFFFBBC05),
size: 86,
sizeTwo: 220,
colorTwo: Colors.blue,
),
HorizontalDetailsModel(
name: 'Fri',
color: const Color(0xFFFBBC05),
size: 64,
sizeTwo: 170,
colorTwo: Colors.blue,
),
HorizontalDetailsModel(
name: 'Sat',
color: const Color(0xFFFBBC05),
size: 155,
sizeTwo: 120,
colorTwo: Colors.blue,
),
HorizontalDetailsModel(
name: 'Sun',
color: const Color(0xFFFBBC05),
size: 200,
sizeTwo: 96,
colorTwo: Colors.blue,
),
],
verticalInterval: 100,
horizontalBarPadding: 20,
),
),
);
}
}
更多关于Flutter简单条形图绘制插件unique_simple_bar_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter简单条形图绘制插件unique_simple_bar_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用unique_simple_bar_chart插件来绘制简单条形图的示例代码。
首先，确保你已经在pubspec.yaml文件中添加了unique_simple_bar_chart依赖：
dependencies:
flutter:
sdk: flutter
unique_simple_bar_chart: ^latest_version # 请替换为最新版本号
然后，运行flutter pub get来获取依赖包。
接下来是示例代码，展示如何使用unique_simple_bar_chart来绘制一个简单的条形图：
import 'package:flutter/material.dart';
import 'package:unique_simple_bar_chart/unique_simple_bar_chart.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple Bar Chart Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BarChartScreen(),
);
}
}
class BarChartScreen extends StatelessWidget {
// 示例数据
final List<double> data = [5, 10, 15, 20, 25];
final List<String> labels = ['A', 'B', 'C', 'D', 'E'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Bar Chart'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用UniqueSimpleBarChart绘制条形图
UniqueSimpleBarChart(
data: data,
labels: labels,
barWidth: 30.0, // 条形宽度
spaceBetweenBars: 10.0, // 条形之间的间距
barColor: Colors.blue, // 条形颜色
barBackgroundColor: Colors.grey[200]!, // 条形背景颜色
labelTextStyle: TextStyle(
color: Colors.black,
fontSize: 14,
),
),
],
),
),
);
}
}
在这个示例中：
- 我们定义了一个
MyApp类作为应用程序的入口。 BarChartScreen是包含条形图的主屏幕。data列表包含条形图的数据值。labels列表包含条形图的标签。UniqueSimpleBarChart组件用于绘制条形图，我们传递了数据、标签、条形宽度、条形之间的间距、条形颜色、条形背景颜色以及标签的文本样式。
这个示例代码展示了如何使用unique_simple_bar_chart插件来绘制一个简单的条形图。你可以根据需要调整数据和样式参数，以满足你的具体需求。
