Flutter 图表库 fl_chart 的使用解析 (二)- 折线图，android webview

//? 是否可以点击 lineTouchData: LineTouchData(enabled: enableLineTouchData,),//? 网格线配置 gridData: FlGridData(show: showGridData,),axisTitleData: _buildFlAxisTitleData(),//? 标题 titlesData: _buildTitles(),//? 边框 borderData: _buildBorderData(),minX: 0,maxX: 14,maxY: 6,minY: 0,//? 线条数据 lineBarsData: linesBarDatas(),);}

二 线条配置

配置了三条线，所以lineBarsData对应的数组有三个元素。

//? 绿线的配置 LineChartBarData(//? 取样点 spots: [FlSpot(1, 1),FlSpot(3, 4),FlSpot(5, 1.8),FlSpot(7, 5),FlSpot(10, 2),FlSpot(12, 2.2),FlSpot(13, 1.8),],//? 是否是曲线 isCurved: isCurved1,// curveSmoothness: 0,colors: const [Color(0x444af699),],//? 线的宽度 barWidth: 4,//? 线头是否是圆形 isStrokeCapRound: true,//? 是否显示数据点 dotData: FlDotData(show: false,),//? 是否显示线上区域 aboveBarData: BarAreaData(show: showAboveBarData, colors: [const Color(0x444af699),]),)

看下LineChartBarData属性：

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

是否显示或隐藏线条 | True || spots | 要展示的线条数据点，参考 FlSpot | [] || colors | 线条颜色，如果提供了多种颜色，则将为渐变色 | [Colors.redAccent] || colorStops | 获取渐变颜色的停止位置，了解更多 | null || gradientFrom | 确定渐变梯度的开始，每个数字应介于 0 和 1 之间。阅读更多 | Offset（0，0） || gradientTo | 确定渐变的结束，每个数字应介于 0 和 1 之间。阅读更多 | Offset（1，0） || barWidth | 线条的宽度 | 2.0 || isCurved | 是平滑曲线还是折线 | false || curveSmoothness | 曲线角的平滑度半径（当 isCurved 为 true 时起作用） | 0.35 || preventCurveOverShooting | 防止在线性序列点上绘制曲线时出现过冲，请检查此问题 | false || preventCurveOvershootingThreshold | 应用防止过冲算法的阈值 | 10.0 || isStrokeCapRound | 确定条形线的起点和终点是直角头还是圆头 | false || belowBarData | 线条下面填充，参考BarAreaData | BarAreaData || aboveBarData | 线条上面填充，参考 BarAreaData](github.com/imaNNeoFigh…) | BarAreaData || dotData | 数据点，参考FlDotData | FlDotData（） || showingIndicators | 根据提供的索引显示坐标 | [] || dashArray | 破折号偏移量和长度的圆形数组。例如，该数组[5, 10]将导致长 5 像素的短划线，然后是 10 像素长的空白。该阵列[5, 10, 5]将导致 5 像素破折号，10 像素破折号，5 像素破折号，5 像素破折号，10 像素破折号等。 | Null || shadow | 线条阴影，参见“阴影”。 | 阴影（） || isStepLineChart | 如果设置为 true，则使用绘制“折线图”样式的图表lineChartStepData。 | false || lineChartStepData | 保存用于表示步骤折线图的数据，并且仅在[isStepChart]为 true 时才有效。 | LineChartStepData（） |

三 边框配置

图表四个方向的边框，有总显示开关，决定是否显示和隐藏所有，如果开启，又想隐藏个别边框，需要设置透明色。

//? 边框信息 FlBorderData _buildBorderData() {return FlBorderData(show: showBorderData,border: Border(bottom: showBottomBorder? BorderSide(color: Color(0xff4e4965),width: 4,): BorderSide(color: Colors.transparent,),left: showLeftBorder? BorderSide(color: Color(0xff4e4965),width: 2,): BorderSide(color: Colors.transparent,),right: BorderSide(color: Colors.transparent,),top: BorderSide(color: Colors.transparent,),));}

FlBorderData对应边框信息，有两个参数，show就是显示与隐藏的边框，border是边框数据。

四 坐标轴配置

FlTitlesData可以配置 4 条坐标轴，也有一个总开关，如果要显示坐标轴，就设为true，然后配置对应位置的数据：

//? 坐标配置 FlTitlesData _buildTitles() {return FlTitlesData(//? 下边标题 bottomTitles: _buildBottomTitle(),//? 左侧标题 leftTitles: _buildLeftTitle(),);}

每个位置对应的是SideTitles，设置如下：

SideTitles _buildLeftTitle() {return SideTitles(showTitles: showlLeftTitles,getTextStyles: (value) => const TextStyle(color: Color(0xff75729e),fontWeight: FontWeight.bold,fontSize: 14,),getTitles: (value) {switch (value.toInt()) {case 1:return '1m';case 2:return '2m';case 3:return '3m';case 4:return '5m';case 5:return '6m';}return '';