Flutter实时刷新折线图实现
背景：
最近有个项目需求，需要以图表的方式展示实时采集的脑神经数据。数据比较多，以1k的采样率来算，乘以采集通道数，大致需要每秒刷新万级以上的数据点。
正常这种图表一般都是在matlab上展示分析的。不过为了一些其它功能吧，需要在pad上也实现这个功能。之前在ipad上使用三方库有实现过差不多的需求功能，不过这次的项目要求是在android pad上使用。本人不喜欢android原生开发，但对flutter还是比较喜欢的，自然就采用了flutter开发。
工具调研
欲先成其事，必先利其器。磨刀不误砍柴功，遂先找了找flutter的图表库。寻了一遍，flutter图表库用的比较多的着实比较少，只有两个fl_chart和graphic，还有个syncfusion_officechart，不过这个是付费版的（也能免费用，但是条件限制很苛刻）。剩下还有一些用的人不太多的库，没有太多研究。
直接上手模拟生成了一堆数据，然后丢进了fl_chart。然后图是出来了，在50ms刷新频率，上万数据点的显示下，图表卡成了幻灯片。一看fps在10左右徘徊。换成graphic，效果稍微好了些，but依旧很卡，看了下cpu消耗。大多数cpu都消耗在了x轴取title的操作上，这里因为graphic数据格式定义的关系，当数据多了还有个性能bug。比如1w个点，就要做1w次循环从1w的数据里找title。直接炸裂，做个map，从map里取应该会提升很多吧。不过我的需求比较简单，不需要显示这么复杂的x轴title。于是直接改库源码，换成index作为x title。性能提升到了25左右的fps。看着满载的cpu和raster负荷。我陷入了沉思。
自己动手丰衣足食
我的需求只需要展示出数据变动的曲线，而交互什么的在这么高的频率刷新下是没有需求的。于是决定自己画个图表。
看了下flutter的canvas绘制，貌似还挺简单。甚至提供了直接通过points画线的功能。
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint);
enum PointMode {
points,
lines,
polygon,
}
于是一切都简单了，改吧改吧，一个简单的手写版折线图就出来了。 大致贴个代码
class WSChartView extends StatelessWidget {
const WSChartView(this.config, this.points, {super.key});
final List<Offset> points;
final ChartConfig config;
@override
Widget build(BuildContext context) {
return Stack(
children: [
if (config.yTitles != null)
SizedBox(
width: 32,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: config.yTitles!.map((e) => Text(e)).toList()),
),
if (config.yTitles != null)
SizedBox.expand(
child: RepaintBoundary(
child: CustomPaint(
painter: ChartXYPainter(ChartXYConfig(yTitles: config.yTitles)),
))),
SizedBox.expand(
child: Container(
padding: EdgeInsets.fromLTRB(
config.yTitles != null ? 32 : 8, 8, 8, 8),
child: RepaintBoundary(
child: CustomPaint(
painter: _WSPainter(points, config),
),
)))
],
);
}
}
class _WSPainter extends CustomPainter {
_WSPainter(this.points, this.config) {
_paint = Paint();
_paint.strokeWidth = 1;
_paint.color = config.color;
}
final List<Offset> points;
final ChartConfig config;
late Paint _paint;
@override
void paint(Canvas canvas, Size size) {
var length = points.length;
var data = <Offset>[];
final lastX = points.last.dx;
var xPercent = size.width / lastX;
var yPercent = size.height / 2 / config.yMax;
for (var i = 0; i < length; i++) {
var point = points[i];
data.add(
Offset(point.dx * xPercent, (config.yMax - point.dy) * yPercent));
}
canvas.drawPoints(PointMode.polygon, data, _paint);
}
@override
bool shouldRepaint(covariant _WSPainter oldDelegate) {
return true;
}
}
class ChartXYPainter extends CustomPainter {
ChartXYPainter(this.config) {
_paint = Paint();
_paint.strokeWidth = 2;
_paint.color = Colors.black;
}
late Paint _paint;
final ChartXYConfig config;
@override
void paint(Canvas canvas, Size size) {
final edge = (
8.0,
8.0,
config.xTitles != null ? 32.0 : 8.0,
config.yTitles != null ? 32.0 : 8.0
);
canvas.drawLine(Offset(edge.$4, size.height - edge.$3),
Offset(size.width - edge.$2, size.height - edge.$3), _paint);
canvas.drawLine(Offset(edge.$4, size.height - edge.$3),
Offset(edge.$4, edge.$1), _paint);
}
@override
bool shouldRepaint(covariant ChartXYPainter oldDelegate) {
return false;
}
}
ChartXYPainter 对应的是画xy轴的功能。
代码简洁，功能也挺简单，后续有对应的刷新实时要求高的图表都可以用这种方式实现。性能会好很多。