代码之家  ›  专栏  ›  技术社区  ›  SbE

Flutter条形图在每个条形图的顶部显示编号值

  •  1
  • SbE  · 技术社区  · 1 年前

    我有一个关于颤动的问题。

    我想显示一个基于json文件中数据的barchart。

    我的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
    },}
    

    我已经成功了,但我最终在每个小节的顶部都有编号值。

    enter image description here

    我首先创建了一个函数来加载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(),
      ));
    }
    

    谢谢你的帮助。

    1 回复  |  直到 1 年前
        1
  •  0
  •   Ivo    1 年前

    尝试添加 topTitles 到此部分

          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()],
            ),
          ),
    

    喜欢

          titlesData: FlTitlesData(
            topTitles: SideTitles(showTitles: false),
            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()],
            ),
          ),