Fl_barchart 问题... TT_TT

问题描述 投票:0回答:0

我正在尝试使用需要同时显示正值和负值的条形图,但我面临三个问题:

  1. backrod 不会延伸到负值/将 x 轴向上移动以适应负值,导致杆向相反方向延伸。
  2. 我无法将图表放入我显示它的卡片中。
  3. 我希望图表在加载选项卡时进行动画处理,但我似乎找不到这样做的方法。

这是正在发生的事情的图像: Screenshot of the page displaying the chart

这是条形图部分的代码:

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,
  );
}

  1. 我曾尝试设置 backRodData 的来源和来源,但这不起作用。
  2. 我已经尝试过 padding、sizedbox、container 等,但在条形图上没有任何作用。
  3. 对于动画,我根本不知道我能做些什么来实现它。

从这一切中可能很清楚,我对 Flutter 还很陌生……所以我将依靠这里优秀的人的帮助! :)

提前致谢!

flutter flutter-animation
© www.soinside.com 2019 - 2024. All rights reserved.