fl_chart的简单使用——BarChart

最新推荐文章于 2024-09-03 08:14:09 发布

Jealh-h

最新推荐文章于 2024-09-03 08:14:09 发布

阅读量2.5k

点赞数

分类专栏： flutter 文章标签：数据可视化

本文链接：https://blog.csdn.net/qq_45753358/article/details/119702285

版权

本文档展示了如何利用fl_chart库创建BarChart，包括完整代码示例、展示的效果图及更多配置选项。

摘要由CSDN通过智能技术生成

完整代码

import 'dart:math';

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class BarChartScreen extends StatefulWidget {
   
  @override
  State<StatefulWidget> createState() {
   
    return BarChartState();
  }
}

class BarChartState extends State<BarChartScreen> {
   
  late List data = [];
  @override
  void initState() {
   
    // TODO: implement initState
    super.initState();
    var rand = Random();
    for (int i = 0; i < 5; i++) {
   
      data.add({
   "yAxis": rand.nextDouble() * 10, "xAxis": i});
    }
  }

  @override
  Widget build(BuildContext context) {
   
    return Container(
      height: 300,
      child: BarChart(
          BarChartData(
            // 设置为center对齐，才能使groupsSpace生效
            alignment: BarChartAlignment.center,
            maxY: 10,
            // barGroups之间距离
            groupsSpace: 16,
            barGroups: data.map((e) {
   
              return BarChartGroupData(
                x: e["xAxis"],
                // 一个组内，各个barRod之间的间距
                barsSpace: 3,
                // 在BarChartRodData头上显示tooltip，
                // 数组放一个组内rodData的下标，表示要在一个组内哪一个柱状图上显示
                showingTooltipIndicators: [0],
                barRods: [
                  BarChartRodData(
                    y: e[

最低0.47元/天解锁文章