我正在尝试使用需要同时显示正值和负值的条形图,但我面临三个问题:
这是条形图部分的代码:
import 'package:expense_tracker/Charts/bar_data.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class BarGraph extends StatelessWidget {
final double? maxY;
final double monAmount;
final double tueAmount;
final double wedAmount;
final double thuAmount;
final double friAmount;
final double satAmount;
final double sunAmount;
const BarGraph({
super.key,
required this.maxY,
required this.monAmount,
required this.tueAmount,
required this.wedAmount,
required this.thuAmount,
required this.friAmount,
required this.satAmount,
required this.sunAmount,
});
@override
Widget build(BuildContext context) {
//initialize bar data
BarData myData = BarData(
monAmount: monAmount,
tueAmount: tueAmount,
wedAmount: wedAmount,
thuAmount: thuAmount,
friAmount: friAmount,
satAmount: satAmount,
sunAmount: sunAmount,
);
myData.initializeBarData();
return BarChart(
BarChartData(
maxY: maxY,
minY: 0,
gridData: FlGridData(show: false),
borderData: FlBorderData(show: false),
titlesData: FlTitlesData(
show: true,
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: getBottomTitles,
),
)),
barGroups: myData.barData
.map(
(data) => BarChartGroupData(
x: data.x,
barRods: [
BarChartRodData(
toY: data.y,
color: Colors.blueGrey,
width: 25,
borderRadius: BorderRadius.circular(5),
backDrawRodData: BackgroundBarChartRodData(
show: true,
fromY: double.parse('-$maxY'),
toY: maxY,
color: Colors.blueGrey[300],
),
),
],
),
)
.toList(),
),
swapAnimationCurve: Curves.bounceIn,
swapAnimationDuration: const Duration(milliseconds: 300),
);
}
}
Widget getBottomTitles(double value, TitleMeta meta) {
TextStyle style = TextStyle(
color: Colors.blueGrey[700], fontWeight: FontWeight.bold, fontSize: 14);
Widget text;
switch (value.toInt()) {
case 0:
text = Text(
'Mon',
style: style,
);
break;
case 1:
text = Text(
'Tue',
style: style,
);
break;
case 2:
text = Text(
'Wed',
style: style,
);
break;
case 3:
text = Text(
'Thu',
style: style,
);
break;
case 4:
text = Text(
'Fri',
style: style,
);
break;
case 5:
text = Text(
'Sat',
style: style,
);
break;
case 6:
text = Text(
'Sun',
style: style,
);
break;
default:
text = Text(
'',
style: style,
);
break;
}
return SideTitleWidget(
axisSide: meta.axisSide,
child: text,
);
}
从这一切中可能很清楚,我对 Flutter 还很陌生……所以我将依靠这里优秀的人的帮助! :)
提前致谢!