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

旺仔大牛

已于 2023-07-07 12:12:23 修改

阅读量4.7k

点赞数

分类专栏： Flutter学习文章标签： fl_chart Flutter

于 2023-07-07 12:11:36 首次发布

本文链接：https://blog.csdn.net/adojayfan/article/details/131591470

版权

Flutter学习专栏收录该内容

29 篇文章 4 订阅

订阅专栏

fl_chart是Flutter的全功能图表库，类似于echarts和MPAndroidChart。它支持LineChart、BarChart和PieChart。文章提供了折线图和柱状图的简单使用示例，包括数据设置、样式配置和交互功能。

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

简介

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

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

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

简单使用

库文档提供了详细的api说明，但是太过形式主义，全是对参数的说明。
没有每种图的简单使用，只提供了例子代码，需要自己去看，对不熟悉的人非常不友好！
以下是我经过使用后整理出来的最快速使用的说明。

折线图

柱状图

  _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;
  }