写点什么

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

用户头像
Android架构
关注
发布于: 10 小时前

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 |[附上源码](


)

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter图表库fl_chart的使用解析(二)-折线图,Android最牛教材