如何在flutter中设置LineChart图表中的日期时间？

Question

我在本地数据库中有一个表，其中有两个值，一个是changeAmount，第二个是它们的时间，意味着我正在跟踪金额随时间变化的历史记录。我尝试在 X 轴上显示时间并在 Y 轴上显示更改量，我理解 y 轴，这可以工作，但是当我也设置 X 轴时，则不会显示。

这是我的图表数据代码

// ignore_for_file: avoid_print

import 'package:daxno_task/constants/colors.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineChart2 extends StatefulWidget {
  const LineChart2({
    Key? key,
    required this.totalChangedData,
  }) : super(key: key);

  final List<Map<String, dynamic>> totalChangedData;

  @override
  State<LineChart2> createState() => _LineChart2State();
}

class _LineChart2State extends State<LineChart2> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AspectRatio(
          aspectRatio: 1.70,
          child: Padding(
            padding: const EdgeInsets.only(
              right: 5,
              left: 5,
              top: 24,
              bottom: 1,
            ),
            child: LineChart(
              mainData(),
            ),
          ),
        ),
      ],
    );
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style =
        TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: greyColor);
    Widget text;
    switch (value.toInt()) {
      case 2:
        text = const Text('MAR', style: style);
        break;
      case 5:
        text = const Text('JUN', style: style);
        break;
      case 8:
        text = const Text('SEP', style: style);
        break;
      default:
        text = const Text('', style: style);
        break;
    }

    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }

  Widget leftTitleWidgets(double value, TitleMeta meta) {
    const style =
        TextStyle(fontWeight: FontWeight.bold, fontSize: 15, color: greyColor);
    String text;
    switch (value.toInt()) {
      case 1:
        text = '10K';
        break;
      case 3:
        text = '30k';
        break;
      case 5:
        text = '50k';
        break;
      default:
        return Container();
    }

    return Text(text, style: style, textAlign: TextAlign.left);
  }

  LineChartData mainData() {
    // Extract data from the list
    List<FlSpot> spots = widget.totalChangedData.map((data) {
      DateTime changeTime = DateTime.parse(data['changeTime']);
      double xValue = changeTime.day.toDouble();

      double changeAmount = data['changeAmount'];
      return FlSpot(
        xValue,
        changeAmount / 10000,
      );
    }).toList();

    return LineChartData(
      gridData: FlGridData(
        show: false,
        drawVerticalLine: true,
        horizontalInterval: 1,
        verticalInterval: 1,
        getDrawingHorizontalLine: (value) {
          return const FlLine(
            color: greyColor,
            strokeWidth: 1,
          );
        },
        getDrawingVerticalLine: (value) {
          return const FlLine(
            color: greyColor,
            strokeWidth: 1,
          );
        },
      ),
      titlesData: FlTitlesData(
        show: true,
        rightTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 30,
            interval: 1,
            getTitlesWidget: bottomTitleWidgets,
          ),
        ),
        leftTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            interval: 1,
            getTitlesWidget: leftTitleWidgets,
            reservedSize: 32,
          ),
        ),
      ),
      borderData: FlBorderData(
        show: false,
        border: Border.all(color: const Color(0xff37434d)),
      ),
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      lineBarsData: [
        LineChartBarData(
          spots: spots,

          // spots: const [
          //   FlSpot(0, 3),
          //   FlSpot(2.6, 2),
          //   FlSpot(4.9, 5),
          //   FlSpot(6.8, 3.1),
          //   FlSpot(8, 4),
          //   FlSpot(9.5, 3),
          //   FlSpot(11, 4),
          // ],
          isCurved: true,
          gradient: const LinearGradient(
            colors: gradientColors,
          ),
          barWidth: 3,
          isStrokeCapRound: true,
          dotData: const FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(
            show: true,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              // stops: const [0.0, 1.0],
              colors: gradientColors
                  .map((color) => color.withOpacity(0.3))
                  .toList(),
            ),
          ),
        ),
      ],
    );
  }
}

我已经为点数据创建了这个函数

   List<FlSpot> spots = widget.totalChangedData.map((data) {
      DateTime changeTime = DateTime.parse(data['changeTime']);
      double xValue = changeTime.day.toDouble();

这是我在数据库中的数据

[{id: 1, changeAmount: 30000.0, changeTime: 2023-12-28T08:41:24}, {id: 2, changeAmount: 29500.0, changeTime: 2023-12-28T08:42:12}]

我想根据时间在图表上显示 的变化

Answer 1

据我了解，问题出在

bottomTitleWidgets

。有一个

switch

声明，但是

value.toInt()

不属于任何情况，所以什么也没有显示：

 Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style =
        TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: greyColor);
    Widget text;
    switch (value.toInt()) {
      case 2:
        text = const Text('MAR', style: style);
        break;
      case 5:
        text = const Text('JUN', style: style);
        break;
      case 8:
        text = const Text('SEP', style: style);
        break;
      default:
        text = const Text('', style: style);
        break;
    }

    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }

您可能想像这样更改它：

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: greyColor);
    Widget text;
    text = Text(value.toInt().toString(), style: style);
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }