Flutter fl_chart的使用

LineChartData

这是配置LineChart的入口，包含所有配置。

1. super.backgroundColor,：背景色
2. super.borderData,：边框
3. double? minX,：x轴
4. double? maxX,：x轴
5. super.baselineX,：以参考点对齐风格
6. double? minY,：y轴
7. double? maxY,：y轴
8. super.baselineY,：以参考点对齐风格
9. super.gridData = const FlGridData(),：网格
10. super.titlesData = const FlTitlesData(),：4条边上的文字
11. this.lineBarsData = const [],：所有的曲线
12. this.lineTouchData = const LineTouchData(),
13. this.betweenBarsData = const [],
14. super.extraLinesData = const ExtraLinesData(),
15. this.showingTooltipIndicators = const [],
16. super.rangeAnnotations = const RangeAnnotations(),
17. super.clipData = const FlClipData.none(),

LineChartBarData

一个LineChartBarData代表一条曲线。

1. this.spots = const [],：一系列点坐标，这些点，会连成一条曲线
2. this.show = true,：是否显示
3. Color? color,：曲线的颜色
4. this.gradient,：曲线渐变色，会覆盖color
5. this.barWidth = 2.0,
6. this.isCurved = false,
7. this.curveSmoothness = 0.35,
8. this.preventCurveOverShooting = false,
9. this.preventCurveOvershootingThreshold = 10.0,
10. this.isStrokeCapRound = false,
11. this.isStrokeJoinRound = false,
12. BarAreaData? belowBarData,：曲线以下的区域
13. BarAreaData? aboveBarData,
14. this.dotData = const FlDotData(),：点的配置
15. this.showingIndicators = const [],
16. this.dashArray,
17. this.shadow = const Shadow(color: Colors.transparent),：曲线加阴影
18. this.isStepLineChart = false,
19. this.lineChartStepData = const LineChartStepData(),

LineTouchData

曲线的触摸交互配置。

1. bool enabled = true,
2. BaseTouchCallback<LineTouchResponse>? touchCallback,
3. MouseCursorResolver<LineTouchResponse>? mouseCursorResolver,
4. Duration? longPressDuration,
5. this.touchTooltipData = const LineTouchTooltipData(),
6. this.getTouchedSpotIndicator = defaultTouchedIndicators,
7. this.touchSpotThreshold = 10,
8. this.distanceCalculator = _xDistance,
9. this.handleBuiltInTouches = true,
10. this.getTouchLineStart = defaultGetTouchLineStart,
11. this.getTouchLineEnd = defaultGetTouchLineEnd,

类型

• LineChartBarData 一条曲线的配置
  • spots 一系列FlSpot组成一条曲线
  • FlSpot 一个数据点