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

原创

已于 2023-07-07 12:12:23 修改 · 6.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#fl_chart #Flutter

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

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

文章目录

简介
简单使用

简介

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