Flutter chart 的使用

fl_chart

fl_chart是flutter的可视化数据的一个插件，详情可以去pub.dev上查看。主要写一点简单的使用，详细的案例和使用可以参考官方的文档。

线型图 LineChart

LineChart是线型图的widget，属性如下

LineChart(  
    // 比传参数
    LineChartData data, {  
    Key? chartRendererKey,  
    Key? key,  
    // 切换动画的执行时间
    Duration swapAnimationDuration = const Duration(milliseconds: 150),  
    // 动画的时间函数
    Curve swapAnimationCurve = Curves.linear,  
})

线型图的基本信息都在必传参数data中，我们主要看一下LineChartData 参数：

LineChartData的属性很多，简单介绍一下经常使用到的吧，

1. lineBarsData： 线型图的数据信息，以及线条的基本信息的设置

LineChartBarData(
                // 线条是否圆滑
                isCurved: true,
                // 曲线平滑度    
                // curveSmoothness: 1,
                // 颜色
                color: Colors.green,
                // 宽度
                barWidth: 8,
                // 线条的起始，结束位置圆角化
                isStrokeCapRound: true,
                // 点数据的处理  
                dotData: FlDotData(show: false),
                // 遮罩区域（线条和主轴之间是否显示遮罩）
                belowBarData: BarAreaData(show: false),
                // 点数据list表
                spots: const [
                  FlSpot(1, 1),
                  FlSpot(3, 1.5),
                  FlSpot(5, 1.4),
                  FlSpot(7, 3.4),
                  FlSpot(10, 2),
                  FlSpot(12, 2.2),
                  FlSpot(13, 1.8),
],),

来个完整的例子看看吧

Container(
        height: 200,
        padding: EdgeInsets.all(20),
        child: LineChart(
          LineChartData(
            // 边框处理
            borderData: FlBorderData(
              show: true,
              border: const Border(
                bottom: BorderSide(
                  color: Colors.black38,
                  width: 4
                ),
                // 左侧的边框
                left: BorderSide(color: Colors.transparent),
                // 右侧的边框
                right: BorderSide(color: Colors.transparent),
                // 顶部的边框
                top: BorderSide(color: Colors.transparent),
              )
            ),
            // 触摸
            lineTouchData: LineTouchData(
              // 是否展示触摸点的信息
              handleBuiltInTouches: false,
              // 触摸展示的widget的样式设置
              touchTooltipData: LineTouchTooltipData(
                // 背景颜色
                tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
              ),
            ),
            // 是否展示水平虚线
            gridData: FlGridData(show: false),
            
            // 坐标轴的展示数据
            titlesData: FlTitlesData(
              // 底部坐标轴的内容
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  // 预留尺寸
                  reservedSize: 32,
                  // 间隔
                  interval: 1,
                  // 内容widget
                  getTitlesWidget: bottomTitleWidgets,
                ),
              ),
              rightTitles: AxisTitles(
                // 右边的坐标轴内容不展示，
                sideTitles: SideTitles(showTitles: false),
              ),
              topTitles: AxisTitles(
                // 上面的坐标轴内容不展示，
                sideTitles: SideTitles(showTitles: false),
              ),
              leftTitles: AxisTitles(
              
                sideTitles: SideTitles(
                  getTitlesWidget: leftTitleWidgets,
                  showTitles: true,
                  interval: 1,
                  reservedSize: 40,
                ),
              ),
            ),
            // 线条数据
            lineBarsData: [
              LineChartBarData(
                // 线条是否圆滑
                isCurved: true,
                // 曲线平滑度    
                // curveSmoothness: 1,
                // 颜色
                color: Colors.green,
                // 宽度
                barWidth: 8,
                // 线条的起始，结束位置圆角化
                isStrokeCapRound: true,
                // 点数据的处理  
                dotData: FlDotData(show: false),
                // 遮罩区域（线条和主轴之间是否显示遮罩）
                belowBarData: BarAreaData(show: false),
                // 点数据list表
                spots: const [
                  FlSpot(1, 1),
                  FlSpot(3, 1.5),
                  FlSpot(5, 1.4),
                  FlSpot(7, 3.4),
                  FlSpot(10, 2),
                  FlSpot(12, 2.2),
                  FlSpot(13, 1.8),
                ],
              ),
              
            ],
            minX: 0,
            maxX: 14,
            maxY: 4,
            minY: 0,
          ),
          swapAnimationDuration: Duration(milliseconds: 150), // Optional
          swapAnimationCurve: Curves.linear, // Optional
        ),
      )
  
  // 左边坐标轴的数据
  Widget leftTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 14,
    );
    String text;
    switch (value.toInt()) {
      case 1:
        text = '1m';
        break;
      case 2:
        text = '2m';
        break;
      case 3:
        text = '3m';
        break;
      case 4:
        text = '5m';
        break;
      case 5:
        text = '6m';
        break;
      default:
        return Container();
    }

    return Text(text, style: style, textAlign: TextAlign.center);
  }
  
  // 底部坐标轴的数据
  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
    );
    Widget text;
    switch (value.toInt()) {
      case 2:
        text = const Text('SEPT', style: style);
        break;
      case 7:
        text = const Text('OCT', style: style);
        break;
      case 12:
        text = const Text('DEC', style: style);
        break;
      default:
        text = const Text('');
        break;
    }

    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 10,
      child: text,
    );
  }