我有一个关于Flutter的问题。
我想显示一个条形图的基础上，我有在一个JSON文件的数据。
我的json看起来像这样

{"yearly_crime_counts": {
    "2001": 485885,
    "2002": 486805,
    "2003": 475983,
    "2004": 469421,
    "2005": 453772,
    "2006": 448178,
    "2007": 437087,
    "2008": 427169,
    "2009": 392825,
    "2010": 370505,
    "2011": 351975,
    "2012": 336273,
    "2013": 307478,
    "2014": 275745,
    "2015": 264775,
    "2016": 269808,
    "2017": 269092,
    "2018": 268811,
    "2019": 261290,
    "2020": 212170,
    "2021": 208733,
    "2022": 238712,
    "2023": 134317
},}

字符串
我已经成功了，但我最终与数字值的顶部每个酒吧。

的数据
我首先创建了一个函数来加载json中的数据，完成之后我创建了一个小部件来显示条形图。但我总是以从左到右为每一个小节的位置编号结束。我真的很纠结这是怎么发生的，这是我到目前为止的代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fl_chart/fl_chart.dart';
import 'dart:convert' show json;

class DashboardPage extends StatefulWidget {
  @override
  _DashboardPageState createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  Map<String, dynamic>? jsonData;

  @override
  void initState() {
    super.initState();
    _loadJsonData();
  }

  Future<void> _loadJsonData() async {
    final jsonStr = await rootBundle.loadString('assets/crime_insights.json');
    jsonData = json.decode(jsonStr);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Yearly Crime Counts')),
      body: Center(
        child: jsonData != null
            ? _buildBarChart(jsonData!['yearly_crime_counts'])
            : CircularProgressIndicator(),
      ),
    );
  }

  Widget _buildBarChart(Map<String, dynamic> data) {
    final List<String> years = data.keys.toList();
    final List<int> crimeCounts = data.values.map<int>((value) => value as int).toList();

    return SizedBox(
      height: 300,
      child: BarChart(
        BarChartData(
          titlesData: FlTitlesData(
            leftTitles: SideTitles(showTitles: true),
            bottomTitles: SideTitles(
              showTitles: true,
              getTextStyles: (context, value) =>
                  const TextStyle(color: Color(0xff939393), fontWeight: FontWeight.bold, fontSize: 12),
              getTitles: (value) => years[value.toInt()],
            ),
          ),
          borderData: FlBorderData(show: false),
          barGroups: years
              .asMap()
              .map(
                (index, year) => MapEntry(
                  index,
                  BarChartGroupData(
                    x: index,
                    barsSpace: 4,
                    barRods: [
                      BarChartRodData(
                        y: crimeCounts[index].toDouble(),
                        width: 16,
                        colors: [Colors.blue],
                      ),
                    ],
                  ),
                ),
              )
              .values
              .toList(),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: DashboardPage(),
  ));
}

型
谢谢你的帮助。