2024-05-06 17:28:10 +02:00
|
|
|
import 'package:flutter/cupertino.dart';
|
|
|
|
import 'package:syncfusion_flutter_charts/charts.dart';
|
|
|
|
|
2024-06-12 12:48:30 +02:00
|
|
|
// Widget für die Erstellung eines gestapelten Säulendiagramms
|
2024-05-06 17:28:10 +02:00
|
|
|
class StackedColumnChart extends StatelessWidget {
|
2024-05-24 14:04:26 +02:00
|
|
|
final List<double> lowerValues; // Liste der unteren Werte für das Diagramm
|
|
|
|
final List<double> upperValues; // Liste der oberen Werte für das Diagramm
|
2024-05-06 17:28:10 +02:00
|
|
|
|
|
|
|
const StackedColumnChart({
|
|
|
|
super.key,
|
|
|
|
required this.lowerValues,
|
|
|
|
required this.upperValues,
|
|
|
|
});
|
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return SfCartesianChart(
|
2024-05-20 16:34:31 +02:00
|
|
|
legend: const Legend(
|
2024-05-24 14:04:26 +02:00
|
|
|
isVisible: true,
|
|
|
|
position: LegendPosition.top,
|
2024-05-20 16:34:31 +02:00
|
|
|
),
|
2024-05-06 17:28:10 +02:00
|
|
|
primaryXAxis: const CategoryAxis(
|
|
|
|
title: AxisTitle(text: 'Jahr'),
|
|
|
|
),
|
|
|
|
primaryYAxis: const NumericAxis(
|
|
|
|
title: AxisTitle(text: 'Euro'),
|
|
|
|
),
|
|
|
|
series: <CartesianSeries>[
|
2024-05-24 14:04:26 +02:00
|
|
|
// Serie für die Einzahlungen (untere Werte)
|
2024-05-06 17:28:10 +02:00
|
|
|
StackedColumnSeries<SalesData, int>(
|
|
|
|
dataSource: _getLowerChartData(),
|
|
|
|
xValueMapper: (SalesData sales, _) => sales.year,
|
|
|
|
yValueMapper: (SalesData sales, _) => sales.value,
|
2024-05-20 16:34:31 +02:00
|
|
|
name: 'Einzahlungen',
|
2024-05-24 14:04:26 +02:00
|
|
|
color: CupertinoColors.systemGrey.darkHighContrastColor,
|
2024-05-06 17:28:10 +02:00
|
|
|
),
|
2024-05-24 14:04:26 +02:00
|
|
|
// Serie für die Zinsen (obere Werte)
|
2024-05-06 17:28:10 +02:00
|
|
|
StackedColumnSeries<SalesData, int>(
|
|
|
|
dataSource: _getUpperChartData(),
|
|
|
|
xValueMapper: (SalesData sales, _) => sales.year,
|
|
|
|
yValueMapper: (SalesData sales, _) => sales.value,
|
2024-05-20 16:34:31 +02:00
|
|
|
name: 'Zinsen',
|
2024-05-24 14:04:26 +02:00
|
|
|
color: CupertinoColors.systemGreen.highContrastColor,
|
2024-05-06 17:28:10 +02:00
|
|
|
),
|
|
|
|
],
|
2024-05-20 16:34:31 +02:00
|
|
|
trackballBehavior: TrackballBehavior(
|
|
|
|
enable: true,
|
|
|
|
tooltipSettings: const InteractiveTooltip(enable: true),
|
|
|
|
activationMode: ActivationMode.singleTap,
|
|
|
|
hideDelay: 2000,
|
|
|
|
),
|
2024-05-06 17:28:10 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-05-24 14:04:26 +02:00
|
|
|
// Methode zur Erstellung der Daten für die untere Serie (Einzahlungen)
|
2024-05-06 17:28:10 +02:00
|
|
|
List<SalesData> _getLowerChartData() {
|
|
|
|
List<SalesData> chartData = [];
|
|
|
|
for (int i = 0; i < lowerValues.length; i++) {
|
|
|
|
chartData.add(SalesData(i + 1, lowerValues[i]));
|
|
|
|
}
|
|
|
|
return chartData;
|
|
|
|
}
|
2024-05-24 14:04:26 +02:00
|
|
|
|
|
|
|
// Methode zur Erstellung der Daten für die obere Serie (Zinsen)
|
2024-05-06 17:28:10 +02:00
|
|
|
List<SalesData> _getUpperChartData() {
|
|
|
|
List<SalesData> chartData = [];
|
|
|
|
for (int i = 0; i < upperValues.length; i++) {
|
|
|
|
chartData.add(SalesData(i + 1, upperValues[i]));
|
|
|
|
}
|
|
|
|
return chartData;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-24 14:04:26 +02:00
|
|
|
// Klasse zur Modellierung der Datenpunkte im Diagramm
|
2024-05-06 17:28:10 +02:00
|
|
|
class SalesData {
|
2024-06-12 12:48:30 +02:00
|
|
|
final int year; // Jahr des Datenpunkts
|
|
|
|
final double value; // Wert des Datenpunkts
|
2024-05-06 17:28:10 +02:00
|
|
|
|
|
|
|
SalesData(this.year, this.value);
|
|
|
|
}
|