使用框架syncfusion_flutter_charts，通过框架自带刷新方法结合手势监听实现滚动效果
直接上代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math' as math;
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:bezier_chart/bezier_chart.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
_HomePageState() {
// timer =
// Timer.periodic(const Duration(milliseconds: 1000), _updateDataSource);
}
ZoomPanBehavior _zoomingBehavior;
Timer timer;
List<_ChartData> chartData = <_ChartData>[
_ChartData(0, 42),
_ChartData(1, 47),
_ChartData(2, 33),
_ChartData(3, 49),
_ChartData(4, 54),
_ChartData(5, 41),
_ChartData(6, 58),
_ChartData(7, 51),
_ChartData(8, 98),
_ChartData(9, 41),
_ChartData(10, 53),
_ChartData(11, 72),
_ChartData(12, 86),
_ChartData(13, 52),
_ChartData(14, 94),
_ChartData(15, 92),
_ChartData(16, 86),
_ChartData(17, 72),
_ChartData(18, 94),
];
int count = 19;
List<_ChartData> chartOther = <_ChartData>[];
List<_ChartData> chartOtherF = <_ChartData>[];
// _ChartData dataed;
ChartSeriesController _chartSeriesController;
@override
void dispose() {
timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
double left = 0;
return GestureDetector(
// 手指滑动回调
onPanUpdate: (DragUpdateDetails detail) {
double size = detail.delta.dx;
left = left + detail.delta.dx;
print('滑动距离 --- $size --- $left');
if (size < 0) {
//向左滑动
print('向左滑动');
_slideUpdateDataSource(true);
} else if (size > 0) {
//向又滑动
print('向右滑动');
_slideUpdateDataSource(false);
}
},
onPanEnd: (DragEndDetails detail) {
// 滑动结束时在x、y轴上的速度
// left = 0;
},
child: Center(
child: Container(
// color: Colors.red,
height: MediaQuery.of(context).size.height / 2,
width: MediaQuery.of(context).size.width,
child: _getLiveLineChart(),
),
),
// child: sample3(context),
);
// return sample3(context);
}
/// Returns the realtime Cartesian line chart.
SfCartesianChart _getLiveLineChart() {
return SfCartesianChart(
plotAreaBorderWidth: 0,
primaryXAxis: NumericAxis(
majorGridLines: MajorGridLines(width: 0),
interval: 2,
),
primaryYAxis: NumericAxis(
axisLine: AxisLine(width: 0),
majorTickLines: MajorTickLines(size: 0)),
series: <LineSeries<_ChartData, int>>[
LineSeries<_ChartData, int>(
onRendererCreated: (ChartSeriesController controller) {
_chartSeriesController = controller;
},
dataSource: chartData,
color: const Color.fromRGBO(192, 108, 132, 1),
xValueMapper: (_ChartData sales, _) => sales.country,
yValueMapper: (_ChartData sales, _) => sales.sales,
animationDuration: 0,
)
],
// zoomPanBehavior: _zoomingBehavior
);
}
///Continously updating the data source based on timer
void _updateDataSource(Timer timer) {
bool isCardView = true;
if (isCardView != null) {
chartData.add(_ChartData(count, _getRandomInt(10, 100)));
if (chartData.length == 20) {
chartData.removeAt(0);
_chartSeriesController.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
removedDataIndexes: <int>[0],
);
} else {
_chartSeriesController.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
);
}
count = count + 1;
}
}
void _slideUpdateDataSource(bool isLeft) {
if (isLeft) {
//左滑
int length = chartOtherF.length;
// print('F数据 ---- $length');
if (chartOtherF.length != 0) {
chartOther.add(chartData.last);
chartData.removeLast();
chartData.insert(0, chartOtherF.last);
_ChartData dataed = chartData[1];
num datanum = dataed.sales;
num coutnm = dataed.country;
print('dataed数据 ---- $datanum--$coutnm');
_chartSeriesController.updateDataSource(
addedDataIndexes: <int>[0],
removedDataIndexes: <int>[chartData.length - 1],
updatedDataIndexes: <int>[0, 1]);
count = count - 1;
chartOtherF.removeLast();
// int length = chartOtherF.length;
print('F数据 ---- $count');
}
} else {
//右划
num dataed;
if (chartOther.length != 0) {
_ChartData dataeds = chartOther[0];
dataed = dataeds.sales;
chartOther.removeAt(0);
num counted = dataeds.country;
print('数据回调 ---$dataed');
print('数据回调 ---$counted');
} else {
dataed = _getRandomInt(10, 100);
}
chartData.add(_ChartData(count, dataed));
chartOtherF.add(chartData[0]);
if (chartData.length == 20) {
chartData.removeAt(0);
_chartSeriesController.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
removedDataIndexes: <int>[0],
);
} else {
_chartSeriesController.updateDataSource(
addedDataIndexes: <int>[chartData.length - 1],
);
}
count = count + 1;
}
}
///Get the random data
num _getRandomInt(num min, num max) {
final math.Random _random = math.Random();
return min + _random.nextInt(max - min);
}
}
/// Private calss for storing the chart series data points.
class _ChartData {
_ChartData(this.country, this.sales);
final num country;
final num sales;
}
网友评论