Flutter 图表库 fl_chart 的使用解析 (二)- 折线图，Android 最牛教材

Color(0x444af699),],//? 线的宽度 barWidth: 4,//? 线头是否是圆形 isStrokeCapRound: true,//? 是否显示数据点 dotData: FlDotData(show: false,),//? 是否显示线上区域 aboveBarData: BarAreaData(show: showAboveBarData, colors: [const Color(0x444af699),]),)

看下LineChartBarData属性：

) | [] || 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 '';},margin: 8,reservedSize: 30,);}

) the style to use for title text | TextStyle(color: Colors.black, fontSize: 11) || margin | 文字和边框的间距 | 6 || interval | 间隔几个坐标显示 | null || rotateAngle | 旋转标题的顺时针角度 | 0.0 || checkToShowTitle | 确定以提供的值显示或不显示标题 | show all |

五 标题配置

标题是显示在坐标轴后面的文字标题，每个轴对应一个。

//? 标题配置 FlAxisTitleData _buildFlAxisTitleData() {return FlAxisTitleData(leftTitle: AxisTitle(titleText: "侧轴标题", showTitle: showAxisLeftTitle),bottomTitle: AxisTitle(titleText: "底部标题", showTitle: showAxisBottomTitle),);}六 配置触摸

)，它确定如何显示在触摸点的顶部工具提示（表示该工具提示气泡的外观） | LineTouchTooltipData || getTouchedSpotIndicator | 回调的检索列表[TouchedSpotIndicatorData](

)由给定列表[LineBarSpot](

)用于显示上触摸点的指标 | defaultTouchedIndicators || touchSpotThreshold | 触摸精度的阈值 | 10 || handleBuiltInTouches | 如果您想要内置的触摸处理功能，请将其设置为 true（在提示的位置上显示工具提示气泡和指示符） | true || getTouchLineStart | 控制线条的起点，默认值是图表的底部 | defaultGetTouchLineStart || getTouchLineEnd | 控制线的结束位置，默认为接触点 | defaultGetTouchLineEnd || touchCallback | 侦听此回调以检索触摸事件，它提供了[LineTouchResponse](

) | null |[附上源码](

)