Flutter图表展示插件bar_graph的使用
Flutter图表展示插件bar_graph的使用
在Flutter中，展示数据的图表是一个常见的需求。bar_graph 是一个简单易用的插件，可以帮助开发者快速创建自定义样式的柱状图。本文将详细介绍如何使用 bar_graph 插件来展示数据。
功能概述
bar_graph 插件的主要功能包括：
- 支持自定义UI样式。
- 可以展示简单的数据。
- 提供高度可配置的选项。
使用步骤
1. 设置图表的高度
默认情况下，图表的高度占屏幕高度的60%。用户可以通过设置参数来自定义高度。
// 默认高度
MediaQuery.of(context).size.height * 0.6
// 自定义高度
graphHeight: 300.0 // 用户输入的高度2. 准备图表数据
bar_graph 需要以下四个主要数据：
List<GraphModel>：用于绘制柱状图的数据。double：图表中最大的值。Color：背景颜色。Color：文本颜色。
定义 GraphModel
GraphModel 包含三个字段：
dateData：日期或标签数据（字符串）。valueData：数值数据（双精度浮点数）。colorData：数据的颜色（Color）。
示例代码：
class GraphModel {
final String dateData; // 日期或标签
final double valueData; // 数值
final Color colorData; // 数据颜色
GraphModel({required this.dateData, required this.valueData, required this.colorData});
}
// 初始化数据列表
List<GraphModel> graphModelList = [];
graphModelList.add(
GraphModel(
dateData: "07-02", // 标签
valueData: 9, // 数值
colorData: Colors.cyan, // 颜色
),
);3. 获取最大值
为了正确绘制图表，需要计算出数据中的最大值。
double largestData = 0;
for (var item in graphModelList) {
var itemValue = item.valueData;
if (itemValue > largestData) {
largestData = itemValue; // 更新最大值
}
}4. 使用 BarGraph 组件
通过 BarGraph 组件将数据展示为柱状图。
import 'package:flutter/material.dart';
import 'package:bar_graph/bar_graph.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Bar Graph Example')),
body: BarGraphExample(),
),
);
}
}
class BarGraphExample extends StatefulWidget {
[@override](/user/override)
_BarGraphExampleState createState() => _BarGraphExampleState();
}
class _BarGraphExampleState extends State<BarGraphExample> {
late List<GraphModel> graphModelList;
late double largestData;
[@override](/user/override)
void initState() {
super.initState();
// 初始化数据
graphModelList = [
GraphModel(dateData: "07-02", valueData: 9, colorData: Colors.cyan),
GraphModel(dateData: "07-03", valueData: 15, colorData: Colors.green),
GraphModel(dateData: "07-04", valueData: 12, colorData: Colors.orange),
GraphModel(dateData: "07-05", valueData: 8, colorData: Colors.red),
];
// 计算最大值
largestData = 0;
for (var item in graphModelList) {
if (item.valueData > largestData) {
largestData = item.valueData;
}
}
}
[@override](/user/override)
Widget build(BuildContext context) {
return Center(
child: BarGraph(
graphData: graphModelList, // 数据源
largestValue: largestData, // 最大值
backgroundColor: Colors.black, // 背景颜色
textColor: Colors.white, // 文本颜色
graphHeight: 300.0, // 图表高度
),
);
}
}
