Flutter图表库fl_chart的使用解析(二)-折线图
2021-05-04 本文已影响0人
A_si
Simulator Screen Shot - iPhone 12 Pro Max - 2021-05-04 at 00.31.45.png
image.png
image.png
image.png
附上开发环境：
MacBook-Pro:~ xun$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale
zh-Hans)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[!] Xcode - develop for iOS and macOS
! CocoaPods 1.9.1 out of date (1.10.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (2 available)
一 基本集成
折线图是一个 Widget，和普通 Widget一样声明即可：
LineChart(
sampleData(),
),
LineChart的构造参数是一个LineChartData，其属性如下：
| 属性名称 | 描述 | 默认值 |
|---|---|---|
| lineBarsData | 图表要展示的线的数组，数组的每一位代表一条线。 | [] |
| betweenBarsData | 填充2条图表线之间的区域 | [] |
| titlesData | 坐标，可以设置四个方向的标题 | FlTitlesData（） |
| axisTitleData | 标题 | FlAxisTitleData（） |
| extraLinesData | 额外的水平和垂直线的图形细节 | |
| lineTouchData | 触摸交互详细信息 | LineTouchData（） |
| rangeAnnotations | 在图表后面显示范围注释，请检查RangeAnnotations | RangeAnnotations（） |
| showingTooltipIndicators | 根据提供的位置（x）显示工具提示，以及LineBarSpot的列表 | [] |
| gridData | 网格数据 | FlGridData（） |
| borderData | 边框数据 | FlBorderData（） |
| minX | 获取x轴的最小值x，如果为null，从lineBars中读取值 | null |
| maxX | 获取x轴的最大x，如果为null，从lineBars中读取值 | null |
| minY | 获取y轴的最小y，如果为null，从lineBars中读取值 | null |
| maxY | 获取y轴的最大y，如果为null，从lineBars中读取值 | null |
| clipData | 将图表裁剪到边框（防止绘图超出边框） | FlClipData.none（） |
| backgroundColor | 图表后面绘制的背景色 | null |
/// 配置文件
LineChartData sampleData() {
return LineChartData(
//? 是否可以点击
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属性：
| 属性名称 | 描述 | 默认值 |
|---|---|---|
| show | 是否显示或隐藏线条 | 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](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#BarAreaData) | 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,
);
}
| 属性名称 | 描述 | 默认值 |
|---|---|---|
| showTitles | 确定是显示还是隐藏标题 | false |
| getTitles | 该函数可检索相关轴上具有给定值的标题，如果要通过显示大数字的指示符来设置数字格式器，请不要触摸它。 | defaultGetTitle |
| reservedSize | 保留的标题空间，如果设置axisTitleData，这里要留出空间，不然会重叠 | 22 |
| textStyle | 文字属性TextStyle 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),
);
}
六 配置触摸
| 属性名称 | 描述 | 默认值 |
|---|---|---|
| enabled | 是否允许触摸行为 | true |
| touchTooltipData | 一个LineTouchTooltipData，它确定如何显示在触摸点的顶部工具提示（表示该工具提示气泡的外观） | LineTouchTooltipData |
| getTouchedSpotIndicator | 回调的检索列表TouchedSpotIndicatorData由给定列表LineBarSpot用于显示上触摸点的指标 | defaultTouchedIndicators |
| touchSpotThreshold | 触摸精度的阈值 | 10 |
| handleBuiltInTouches | 如果您想要内置的触摸处理功能，请将其设置为true（在提示的位置上显示工具提示气泡和指示符） | true |
| getTouchLineStart | 控制线条的起点，默认值是图表的底部 | defaultGetTouchLineStart |
| getTouchLineEnd | 控制线的结束位置，默认为接触点 | defaultGetTouchLineEnd |
| touchCallback | 侦听此回调以检索触摸事件，它提供了LineTouchResponse | null |
