Flutter柱状图异常：顶部显示位置序号而非目标数值

我使用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
}}

现有代码 #

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

解决方案 #

问题根源是BarChartRodData未开启柱子顶部的数值显示，默认显示x轴的索引序号。只需修改BarChartRodData的配置，开启数值显示并绑定对应统计值：

• 给BarChartRodData添加showRodValue: true，启用顶部数值显示
• 可选：通过rodValueTextStyle自定义数值样式，rodValueLabelPosition调整数值位置

修改后的核心代码片段 #

BarChartRodData(
  y: crimeCounts[index].toDouble(),
  width: 16,
  colors: [Colors.blue],
  showRodValue: true, // 启用顶部数值显示
  rodValueTextStyle: const TextStyle(
    color: Colors.black,
    fontWeight: FontWeight.bold,
    fontSize: 10,
  ), // 自定义数值样式
),

完整修改后的_buildBarChart方法 #

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],
                      showRodValue: true,
                      rodValueTextStyle: const TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 10,
                      ),
                    ),
                  ],
                ),
              ),
            )
            .values
            .toList(),
      ),
    ),
  );
}

修改后，柱子顶部会显示对应的犯罪统计数值，而非位置序号。

内容的提问来源于stack exchange，提问作者SbE