Flutter最强大的图表库fl_chart的使用

这篇具有很好参考价值的文章主要介绍了Flutter最强大的图表库fl_chart的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

fl_chart是Flutter中功能最全、最强大的图表库。在flutter中的地位相当于前端的echarts、android端的MPAndroidChart

支持常见的LineChart(折线图)、BarChart(柱状图)、PieChart(饼图)。

库地址:https://pub-web.flutter-io.cn/packages/fl_chart

简单使用

库文档提供了详细的api说明,但是太过形式主义,全是对参数的说明。
没有每种图的简单使用,只提供了例子代码,需要自己去看,对不熟悉的人非常不友好!
以下是我经过使用后整理出来的最快速使用的说明。文章来源地址https://www.toymoban.com/news/detail-702588.html

折线图

柱状图

  _buildBarChart() {
    return BarChart(
      BarChartData(
        /// 格式线样子设置
        gridData: FlGridData(
          /// 是否隐藏垂直线
          drawVerticalLine: false,

          /// 水平线的间隔值
          horizontalInterval: 10,

          /// 水平线样式
          getDrawingHorizontalLine: (v) {
            return FlLine(
              color: Color(0xffe5e5e5),
              strokeWidth: 1,
            );
          },
        ),

        /// 边框样式
        borderData: FlBorderData(
            border: const Border(
          top: BorderSide(width: 1),
          right: BorderSide(width: 1),
          left: BorderSide(width: 1),
          bottom: BorderSide(width: 1),
        )),

        /// y轴最大值,从0开始
        maxY: maxYValue,

        /// Bar的数据集合及样式
        barGroups: _generateBar(values),

        /// 只有在alignment为center时,groupsSpace才生效。否则会按宽度平分。
        groupsSpace: 30,

        alignment: BarChartAlignment.center,

        /// 上下左右标题设置
        titlesData: FlTitlesData(
          show: true,
          /// 左侧标题
          leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
          /// 顶部标题
          topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
          /// 底部标题
          bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
          /// 右侧标题
          rightTitles: AxisTitles(
              sideTitles: SideTitles(
              	  /// 是否显示标题
                  showTitles: true,

                  /// 标题宽度
                  reservedSize: rightTitleWidth,

                  /// 标题间隔
                  interval: 10,
                  /// 返回标题Widget
                  getTitlesWidget: (y, meta) {
                    return SideTitleWidget(
                      child: LayoutBuilder(
                        builder: (ctx, constraint) {
                          return SizedBox(
                            width: constraint.maxWidth,
                            child: CommonWidget.commonText(
                              "${y.toInt() - 120}dBm",
                              fontSize: 8,
                              fontWeight: FontWeight.bold,
                              color: Color(titleColor),
                              textAlign: TextAlign.center,
                            ),
                          );
                        },
                      ),
                      axisSide: meta.axisSide,
                      space: 0,
                    );
                  })),
        ),
        /// 点击bar时显示的内容
        barTouchData: BarTouchData(
          touchTooltipData: BarTouchTooltipData(
              getTooltipItem: (group, groupIndex, rod, rodIndex) {
            final textStyle = TextStyle(
              color: rod.color,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            );
            return BarTooltipItem(
                (rod.toY - 120).toInt().toString(), textStyle);
          }),
        ),
      ),
    );
  }

  _generateBar(List<SingleBandModel> list) {
    var bars = list<BarChartGroupData>.generate(5,(index) {
      /// 每个bar的数据
      return BarChartGroupData(
        /// bar的x坐标
        x: index,
        /// 支持多组bar
        barRods: [
          BarChartRodData(
          	/// y轴最小值
          	fromY: 0,
          	/// y轴值
            toY: y,
            /// bar的宽度
            width: 20,
            /// bar颜色
            color: progressColor,
            /// 渐变色。如果设置了渐变,color会失效。
			gradient: LinearGradient(),
            /// 总进度条
            backDrawRodData: BackgroundBarChartRodData(
                show: true, color: Color(0xffe5e5e5), toY: 80),
          ),
        ],
      );
    }).toList();
    return bars;
  }

饼图

到了这里,关于Flutter最强大的图表库fl_chart的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web3:使用Docker-compose方式部署blockscout浏览器+charts图表

    最近做的项目,需要blockscout来部署一个区块链浏览器,至于blockscout是什么,咱们稍后出一篇文章专门介绍下,本次就先介绍一下如何使用Docker-compose方式部署blockscout,以及过程中遇到的种种坑

    2024年02月11日
    浏览(47)
  • iOS 图表框架 Charts

    Charts - github iOS-Charts看这个就够了 - 稀土掘金 4.1.2 用条形图展示睡眠 要实现上面的效果 上面的代码实现的效果如下图 参考博客: iOS Charts库的简单使用 - BarChartView Swift - 第三方图表库Charts使用详解8(折线图7:事件响应、MarkerView标签) 参考博客: iOS Charts库的简单使用 - P

    2024年02月06日
    浏览(47)
  • 14个最强大的建筑设计AI工具

    在整个行业中,建筑师在他们的创造性追求中正在拥抱一个新的合作伙伴:AI。 一旦受到重复和单调的困扰,建筑工人发现自己正处于数字革命的风口浪尖,其中比特和字节掌握着自动化和曾经难以想象的可能性的关键。 推荐:用 NSDT设计器 快速搭建可编程3D场景。 AI革命并

    2024年02月14日
    浏览(45)
  • QT chart图表(温度曲线实战)

    本篇文章开始将带大家学习QT chart图表,后面我们将完成一个小项目,动态温度曲线,并且将本项目移植到ARM开发板上使用DHT11实时检测温度湿度。 QT的QChart是一个用于绘制各种类型图表的QT库。它提供了丰富的图表类型和绘制工具,能够方便地绘制出统计图、折线图、饼图等

    2024年02月05日
    浏览(50)
  • 最强大的布局方案——网格Grid布局万字详解

    Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但它们也存在重大区别。Flex 布局是轴线布局,只能指定\\\"项目\\\"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成\\\"行\\\"和\\\"列\\\",产生单

    2024年02月08日
    浏览(53)
  • C++ Qt开发:Charts绘制各类图表详解

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍 TreeWidget 与 QCharts 的常用方法及灵活运用。 在之前的文章中笔者介绍了如何使

    2024年02月04日
    浏览(47)
  • Go 接口:Go中最强大的魔法,接口应用模式或惯例介绍

    目录 Go 接口:Go中最强大的魔法,接口应用模式或惯例介绍 一、前置原则 二、一切皆组合 2.1 一切皆组合 2.2 垂直组合 2.2.1 第一种:通过嵌入接口构建接口 2.2.2 第二种:通过嵌入接口构建结构体类型 2.2.3 第三种:通过嵌入结构体类型构建新结构体类型 2.3 水平组合 三、接口应

    2024年02月05日
    浏览(55)
  • Ansible:简单、快速、安全、最强大的 IT 自动化系统 - 开源日报 No.140

    ansible/ansible Stars: 59.6k License: GPL-3.0 Ansible 是一个极其简单的 IT 自动化系统,它处理配置管理、应用部署、云提供、临时任务执行、网络自动化和多节点编排。Ansible 使得像零停机滚动更新与负载均衡器一样复杂的更改变得容易。主要功能包括: 极其简单的设置过程和最小学习

    2024年02月22日
    浏览(70)
  • Ansible:简单、快速、安全、最强大的 IT 自动化系统 | 开源日报 No.140

    Stars: 59.6k License: GPL-3.0 Ansible 是一个极其简单的 IT 自动化系统,它处理配置管理、应用部署、云提供、临时任务执行、网络自动化和多节点编排。Ansible 使得像零停机滚动更新与负载均衡器一样复杂的更改变得容易。主要功能包括: 极其简单的设置过程和最小学习曲线 快速并

    2024年01月20日
    浏览(71)
  • 【数字孪生百科】可视化图表知识科普——Pareto图(Pareto Chart)

    Pareto图 (Pareto Chart)又称 帕累托图 、 排列图 ,是一种特殊类型的 条形图 。图中标绘的值是按照事件发生的频率排序而成,显示由于各种原因引起的缺陷数量或不一致的排列顺序。Pareto图是根据 Vilfredo Pareto 命名的,他的原理是“二八原则”,即20%的原因造成80%的问题,如

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包