flutter 曲线学习 使用第三方插件实现左右滑动

flutter 曲线的使用 实现左右滑动

TemperatureChartPage()

TemperatureChartPage2() – 不太完善

方法 ChartDrawPage

import 'package:doluyo/dly_package/widget/dly_widget.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';显示图表使用 syncfusion_flutter_charts 插件实现
class TemperatureData {TemperatureData(this.time, this.temperature);final String time;final double temperature;
}class TempChart extends StatelessWidget {const TempChart({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: ChartDrawPage('℃', '温度'),);}
}//其他方案
class TemperatureChartPage extends StatefulWidget {@override_TemperatureChartPageState createState() => _TemperatureChartPageState();
}class _TemperatureChartPageState extends State<TemperatureChartPage> {final List<TemperatureData> _temperatureData = [TemperatureData('00:00', -20.5),TemperatureData('01:00', -21.0),TemperatureData('02:00', -22.5),TemperatureData('03:00', -23.0),TemperatureData('04:00', -24.5),TemperatureData('05:00', -25.0),TemperatureData('06:00', -26.5),TemperatureData('07:00', -27.0),TemperatureData('08:00', -28.5),TemperatureData('09:00', -29.0),TemperatureData('10:00', -30.5),TemperatureData('11:00', -31.0),TemperatureData('12:00', -32.5),TemperatureData('13:00', -33.0),TemperatureData('14:00', -34.5),TemperatureData('15:00', -35.0),TemperatureData('16:00', -34.5),TemperatureData('17:00', -33.0),TemperatureData('18:00', -32.5),TemperatureData('19:00', -31.0),TemperatureData('20:00', -30.5),TemperatureData('21:00', -29.0),TemperatureData('22:00', -28.5),TemperatureData('23:00', -27.0),];double _visibleMinimum = 0;double _visibleMaximum = 10;@overridevoid initState() {super.initState();// 设置初始可见范围为最后10个数据点_visibleMinimum = _temperatureData.length - 10;_visibleMaximum = _temperatureData.length.toDouble() - 1;}//实现左右滑动显示数据@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('温度曲线'),),body: Center(child: GestureDetector(onHorizontalDragUpdate: (details) {double delta = details.delta.dx;setState(() {_visibleMinimum = (_visibleMinimum - delta / 10).clamp(0, _temperatureData.length - 10);_visibleMaximum = _visibleMinimum + 9;});},child: Container(height: 200,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20),boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: const Offset(0, 3),),],),child: SfCartesianChart(//backgroundColor: Colors.white,// zoomPanBehavior: ZoomPanBehavior(///图表不能滑动//   enablePanning: true,// ),primaryXAxis: CategoryAxis(labelRotation: -45,minimum: _visibleMinimum,maximum: _visibleMaximum,labelStyle: TextStyle(color: Colors.black,fontSize: 12,),axisLine: AxisLine(color: Colors.grey,width: 1,),majorGridLines: MajorGridLines(// color: Colors.grey.withOpacity(0.3),width: 0,//dashArray: [5, 5], // 设置虚线),),primaryYAxis: NumericAxis(title: AxisTitle(text: '温度 (°C)',alignment: ChartAlignment.center,),labelStyle: TextStyle(color: Colors.black,fontSize: 12,),axisLine: AxisLine(color: Colors.grey,width: 1,),majorGridLines: MajorGridLines(color: Colors.grey.withOpacity(0.3),width: 1,dashArray: [5, 5], // 设置虚线),),tooltipBehavior: TooltipBehavior(enable: true),series: <CartesianSeries>[LineSeries<TemperatureData, String>(dataSource: _temperatureData,xValueMapper: (TemperatureData data, _) => data.time,yValueMapper: (TemperatureData data, _) => data.temperature,dataLabelSettings: DataLabelSettings(isVisible: true),name: '温度',markerSettings: MarkerSettings(isVisible: true),color: Colors.blue,width: 3,//dashArray: [5, 5], // 设置虚线),],),).withPadding(EdgeInsets.all(20)),),),);}///不能滑动查看数据
// @override
// Widget build(BuildContext context) {
//   return Scaffold(
//     appBar: AppBar(
//       title: const Text('温度曲线'),
//     ),
//     body: Center(
//       child: Container(
//         height: 400,
//         child: SfCartesianChart(
//           zoomPanBehavior: ZoomPanBehavior(
//             enablePanning: true,
//           ),
//           primaryXAxis: CategoryAxis(
//             labelRotation: -45,
//           ),
//           primaryYAxis: NumericAxis(
//             title: AxisTitle(text: '温度 (°C)'),
//           ),
//           tooltipBehavior: TooltipBehavior(enable: true),//点击查看详情
//           series: <CartesianSeries>[
//             LineSeries<TemperatureData, String>(
//               dataSource: _temperatureData,
//               xValueMapper: (TemperatureData data, _) => data.time,
//               yValueMapper: (TemperatureData data, _) => data.temperature,
//               dataLabelSettings: DataLabelSettings(isVisible: true),//显示点参数
//               name: '温度',
//               markerSettings: MarkerSettings(isVisible: true),//显示圆点
//             ),
//           ],
//         ),
//       ),
//     ),
//   );
// }
}///不理想
class TemperatureChartPage2 extends StatefulWidget {@override_TemperatureChartPageState2 createState() => _TemperatureChartPageState2();
}class _TemperatureChartPageState2 extends State<TemperatureChartPage2> {final List<TemperatureData> _temperatureData = [TemperatureData('00:00', -20.5),TemperatureData('01:00', -21.0),TemperatureData('02:00', -22.5),TemperatureData('03:00', -23.0),TemperatureData('04:00', -24.5),TemperatureData('05:00', -25.0),TemperatureData('06:00', -26.5),TemperatureData('07:00', -27.0),TemperatureData('08:00', -28.5),TemperatureData('09:00', -29.0),TemperatureData('10:00', -30.5),TemperatureData('11:00', -31.0),TemperatureData('12:00', -32.5),TemperatureData('13:00', -33.0),TemperatureData('14:00', -34.5),TemperatureData('15:00', -35.0),TemperatureData('16:00', -34.5),TemperatureData('17:00', -33.0),TemperatureData('18:00', -32.5),TemperatureData('19:00', -31.0),TemperatureData('20:00', -30.5),TemperatureData('21:00', -29.0),TemperatureData('22:00', -28.5),TemperatureData('23:00', -27.0),];double _visibleMinimum = 0;double _visibleMaximum = 10;@overridevoid initState() {super.initState();_visibleMinimum = _temperatureData.length - 10;_visibleMaximum = _temperatureData.length.toDouble() - 1;}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('温度曲线'),),body: Center(child: GestureDetector(onHorizontalDragUpdate: (details) {double delta = details.delta.dx;setState(() {_visibleMinimum = (_visibleMinimum - delta / 10).clamp(0, _temperatureData.length - 10);_visibleMaximum = _visibleMinimum + 9;});},child: Container(height: 400,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: const Offset(0, 3),),],),child: LineChart(LineChartData(minX: _visibleMinimum,maxX: _visibleMaximum,minY: -40,maxY: 0,lineTouchData: LineTouchData(enabled: true),gridData: FlGridData(show: true,drawHorizontalLine: true,drawVerticalLine: true,getDrawingHorizontalLine: (value) {return FlLine(color: Colors.grey.withOpacity(0.3),strokeWidth: 1,dashArray: [5, 5],);},getDrawingVerticalLine: (value) {return FlLine(color: Colors.grey.withOpacity(0.3),strokeWidth: 1,dashArray: [5, 5],);},),borderData: FlBorderData(show: true,border: Border.all(color: Colors.grey,width: 1,),),titlesData: FlTitlesData(show: true,rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false),),topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false),),// bottomTitles: SideTitles(//   showTitles: true,//   getTitles: (value) {//     int index = value.toInt();//     if (index >= 0 && index < _temperatureData.length) {//       return _temperatureData[index].time;//     }//     return '';//   },//   getTextStyles: (value) => TextStyle(//     color: Colors.black,//     fontSize: 12,//   ),//   margin: 10,// ),bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true,getTitlesWidget: (value, meta) =>bottomTitleWidgets(value, meta),reservedSize: 36,interval: 1,),drawBelowEverything: true,),),lineBarsData: [LineChartBarData(spots: _temperatureData.asMap().entries.map((entry) => FlSpot(entry.key.toDouble(),entry.value.temperature,)).toList(),isCurved: true,barWidth: 3,color: Colors.blue,dotData: FlDotData(show: true,getDotPainter: (spot, percent, barData, index) {return FlDotCirclePainter(radius: 4,color: Colors.blue,strokeWidth: 2,strokeColor: Colors.white,);},),belowBarData: BarAreaData(show: true,color: Colors.blue.withOpacity(0.3),),),],),),).withPadding(EdgeInsets.all(10)),),),);}Widget bottomTitleWidgets(double value, TitleMeta meta) {if (value % 1 != 0) {return Container();}final style = TextStyle(//color: AppColors.contentColorBlack,fontWeight: FontWeight.bold,//fontSize: min(18, 18 * chartWidth / 300),);return SideTitleWidget(axisSide: meta.axisSide,space: 16,child: Text(meta.formattedValue, style: style),);}
}///没效果
class TemperatureChartPage3 extends StatefulWidget {@override_TemperatureChartPageState3 createState() => _TemperatureChartPageState3();
}class _TemperatureChartPageState3 extends State<TemperatureChartPage3> {final List<TemperatureData> _temperatureData = [TemperatureData('00:00', -20.5),TemperatureData('01:00', -21.0),TemperatureData('02:00', -22.5),TemperatureData('03:00', -23.0),TemperatureData('04:00', -24.5),TemperatureData('05:00', -25.0),TemperatureData('06:00', -26.5),TemperatureData('07:00', -27.0),TemperatureData('08:00', -28.5),TemperatureData('09:00', -29.0),TemperatureData('10:00', -30.5),TemperatureData('11:00', -31.0),TemperatureData('12:00', -32.5),TemperatureData('13:00', -33.0),TemperatureData('14:00', -34.5),TemperatureData('15:00', -35.0),TemperatureData('16:00', -34.5),TemperatureData('17:00', -33.0),TemperatureData('18:00', -32.5),TemperatureData('19:00', -31.0),TemperatureData('20:00', -30.5),TemperatureData('21:00', -29.0),TemperatureData('22:00', -28.5),TemperatureData('23:00', -27.0),];double _visibleMinimum = 0;double _visibleMaximum = 10;@overridevoid initState() {super.initState();_visibleMinimum = _temperatureData.length - 10;_visibleMaximum = _temperatureData.length.toDouble() - 1;}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('温度曲线'),),body: Center(child: GestureDetector(onHorizontalDragUpdate: (details) {double delta = details.delta.dx;setState(() {_visibleMinimum = (_visibleMinimum - delta / 10).clamp(0, _temperatureData.length - 10);_visibleMaximum = _visibleMinimum + 9;});},child: Container(height: 400,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: const Offset(0, 3),),],),child: LineChart(LineChartData(minX: _visibleMinimum,maxX: _visibleMaximum,minY: -40,maxY: 0,lineTouchData: LineTouchData(enabled: true),gridData: FlGridData(show: true,drawHorizontalLine: true,drawVerticalLine: true,getDrawingHorizontalLine: (value) {return FlLine(color: Colors.grey.withOpacity(0.3),strokeWidth: 1,dashArray: [5, 5],);},getDrawingVerticalLine: (value) {return FlLine(color: Colors.grey.withOpacity(0.3),strokeWidth: 1,dashArray: [5, 5],);},),borderData: FlBorderData(show: true,border: Border.all(color: Colors.grey,width: 1,),),titlesData: FlTitlesData(show: true,),lineBarsData: [LineChartBarData(spots: _temperatureData.asMap().entries.map((entry) => FlSpot(entry.key.toDouble(),entry.value.temperature,)).toList(),isCurved: true,barWidth: 3,color: Colors.blue,dotData: FlDotData(show: true,getDotPainter: (spot, percent, barData, index) {return FlDotCirclePainter(radius: 4,color: Colors.blue,strokeWidth: 2,strokeColor: Colors.white,);},),belowBarData: BarAreaData(show: true,color: Colors.blue.withOpacity(0.3),),),],),),),),),);}
}///没效果
class TemperatureChartPage4 extends StatefulWidget {@override_TemperatureChartPageState4 createState() => _TemperatureChartPageState4();
}class _TemperatureChartPageState4 extends State<TemperatureChartPage4> {final List<TemperatureData> _temperatureData = [TemperatureData('00:00', -20.5),TemperatureData('01:00', -21.0),TemperatureData('02:00', -22.5),TemperatureData('03:00', -23.0),TemperatureData('04:00', -24.5),TemperatureData('05:00', -25.0),TemperatureData('06:00', -26.5),TemperatureData('07:00', -27.0),TemperatureData('08:00', -28.5),TemperatureData('09:00', -29.0),TemperatureData('10:00', -30.5),TemperatureData('11:00', -31.0),TemperatureData('12:00', -32.5),TemperatureData('13:00', -33.0),TemperatureData('14:00', -34.5),TemperatureData('15:00', -35.0),TemperatureData('16:00', -34.5),TemperatureData('17:00', -33.0),TemperatureData('18:00', -32.5),TemperatureData('19:00', -31.0),TemperatureData('20:00', -30.5),TemperatureData('21:00', -29.0),TemperatureData('22:00', -28.5),TemperatureData('23:00', -27.0),];double _visibleMinimum = 0;double _visibleMaximum = 10;@overridevoid initState() {super.initState();_visibleMinimum = _temperatureData.length - 10;_visibleMaximum = _temperatureData.length.toDouble() - 1;}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('温度曲线'),),body: Center(child: GestureDetector(onHorizontalDragUpdate: (details) {// 调整滑动的灵敏度，避免遮挡Y轴double delta = details.delta.dx;setState(() {_visibleMinimum = (_visibleMinimum - delta / 20).clamp(0, _temperatureData.length - 10);_visibleMaximum = _visibleMinimum + 9;});},child: Container(height: 400,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5),spreadRadius: 5,blurRadius: 7,offset: const Offset(0, 3),),],),child: LineChart(LineChartData(minX: _visibleMinimum,maxX: _visibleMaximum,minY: -40,maxY: 0,lineTouchData: LineTouchData(enabled: false),gridData: FlGridData(show: true,drawHorizontalLine: true,drawVerticalLine: true,getDrawingHorizontalLine: (value) {return FlLine(color: Colors.grey.withOpacity(0.3),strokeWidth: 1,dashArray: [5, 5],);},getDrawingVerticalLine: (value) {return FlLine(color: Colors.grey.withOpacity(0.3),strokeWidth: 1,dashArray: [5, 5],);},),borderData: FlBorderData(show: true,border: Border.all(color: Colors.grey,width: 1,),),titlesData: FlTitlesData(show: true,topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false),),rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false),),leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: true,reservedSize: 50, // 为Y轴标题预留空间getTitlesWidget: (value, meta) {return SideTitleWidget(axisSide: meta.axisSide,child: Text('${value.toInt()}°C'),);},),),bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true,reservedSize: 30,interval: 1,getTitlesWidget: bottomTitleWidgets,),),),lineBarsData: [LineChartBarData(spots: _temperatureData.asMap().entries.map((entry) => FlSpot(entry.key.toDouble(),entry.value.temperature,)).toList(),isCurved: true,//是否曲线barWidth: 3,color: Colors.blue,dotData: FlDotData(show: true, //显示点getDotPainter: (spot, percent, barData, index) {//圆点装饰return FlDotCirclePainter(radius: 4,color: Colors.blue,strokeWidth: 2,strokeColor: Colors.white,);},),belowBarData: BarAreaData(//阴影show: false,//color: Colors.blue.withOpacity(0.3),),),],),).withPadding(EdgeInsets.only(left: 10, top: 10, right: 10),),).withPadding(// 添加padding，确保Y轴不被遮挡EdgeInsets.all(20),),),),);}Widget bottomTitleWidgets(double value, TitleMeta meta) {const style = TextStyle(fontWeight: FontWeight.bold,fontSize: 13,//color: AppColors.contentColorBlack,);Widget text;text = Text('${_temperatureData[value.toInt()].time}', style: style);return SideTitleWidget(axisSide: meta.axisSide,child: text,);}
}//其他方案
class ChartDrawPage extends StatefulWidget {final String unit;final String sTitle;final List<TemperatureData>? list;const ChartDrawPage(this.unit,this.sTitle, {this.list = null,Key? key,}) : super(key: key);@override_ChartDrawPageState createState() => _ChartDrawPageState();
}class _ChartDrawPageState extends State<ChartDrawPage> {late List<TemperatureData> _temperatureData = [TemperatureData('00:00', -20.5),TemperatureData('01:00', -21.0),TemperatureData('02:00', -22.5),TemperatureData('03:00', -23.0),TemperatureData('04:00', -24.5),TemperatureData('05:00', -25.0),TemperatureData('06:00', -26.5),TemperatureData('07:00', -27.0),TemperatureData('08:00', -28.5),TemperatureData('09:00', -29.0),TemperatureData('10:00', -30.5),TemperatureData('11:00', -31.0),TemperatureData('12:00', -32.5),TemperatureData('13:00', -33.0),TemperatureData('14:00', -34.5),TemperatureData('15:00', -35.0),TemperatureData('16:00', -34.5),TemperatureData('17:00', -33.0),TemperatureData('18:00', -32.5),TemperatureData('19:00', -31.0),TemperatureData('20:00', -30.5),TemperatureData('21:00', -29.0),TemperatureData('22:00', -28.5),TemperatureData('23:00', -27.0),];double _visibleMinimum = 0;double _visibleMaximum = 10;@overridevoid initState() {super.initState();if (widget.list != null && widget.list!.isNotEmpty) {_temperatureData = widget.list!;}// 设置初始可见范围为最后10个数据点_visibleMinimum = _temperatureData.length - 10;_visibleMaximum = _temperatureData.length.toDouble() - 1;}//实现左右滑动显示数据@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('温度曲线'),),body: Center(child: (_temperatureData.length > 10)? _build_chart2(context): _build_chart1(context),),);}///滑动查看数据Widget _build_chart2(BuildContext context) {return GestureDetector(onHorizontalDragUpdate: (details) {double delta = details.delta.dx;setState(() {_visibleMinimum = (_visibleMinimum - delta / 10).clamp(0, _temperatureData.length - 10);_visibleMaximum = _visibleMinimum + 9;});},child: SfCartesianChart(//backgroundColor: Colors.white,// zoomPanBehavior: ZoomPanBehavior(///图表不能滑动//   enablePanning: true,// ),primaryXAxis: CategoryAxis(labelRotation: -45,minimum: _visibleMinimum,maximum: _visibleMaximum,labelStyle: TextStyle(color: Colors.black,fontSize: 12,),axisLine: AxisLine(color: Colors.grey,width: 1,),majorGridLines: MajorGridLines(// color: Colors.grey.withOpacity(0.3),width: 0,//dashArray: [5, 5], // 设置虚线),),primaryYAxis: NumericAxis(// title: AxisTitle(//标题说明//   text: '${widget.sTitle}(${widget.unit})',//   alignment: ChartAlignment.center,// ),labelStyle: TextStyle(color: Colors.black,fontSize: 12,),axisLine: AxisLine(color: Colors.grey,width: 1,),majorGridLines: MajorGridLines(color: Colors.grey.withOpacity(0.3),width: 1,dashArray: [5, 5], // 设置虚线),),tooltipBehavior: TooltipBehavior(enable: true),series: <CartesianSeries>[LineSeries<TemperatureData, String>(dataSource: _temperatureData,xValueMapper: (TemperatureData data, _) => data.time,yValueMapper: (TemperatureData data, _) => data.temperature,dataLabelSettings: DataLabelSettings(isVisible: true),name: '${widget.sTitle}',markerSettings: MarkerSettings(isVisible: true),color: Colors.blue,width: 3,//dashArray: [5, 5], // 设置虚线),],),);}///不能滑动查看数据Widget _build_chart1(BuildContext context) {return SfCartesianChart(zoomPanBehavior: ZoomPanBehavior(enablePanning: true,),primaryXAxis: CategoryAxis(labelRotation: -45,),// primaryYAxis: NumericAxis(//   title: AxisTitle(text: '温度 (°C)'),// ),tooltipBehavior: TooltipBehavior(enable: true),//点击查看详情series: <CartesianSeries>[LineSeries<TemperatureData, String>(dataSource: _temperatureData,xValueMapper: (TemperatureData data, _) => data.time,yValueMapper: (TemperatureData data, _) => data.temperature,dataLabelSettings: DataLabelSettings(isVisible: true),//显示点参数name: '${widget.sTitle}',markerSettings: MarkerSettings(isVisible: true),color: Colors.blue,width: 3,),],);}
}

插件

  #图表使用--曲线 https://pub.dev/packages/fl_chart/versionsfl_chart: ^0.69.0#图表--曲线 https://pub.dev/packages/syncfusion_flutter_chartssyncfusion_flutter_charts: ^27.2.4