php网站建设难点,seo短视频发布,中山网站建设方案报价,wordpress作者认证Flutter-Charts_painter大数据量绘制性能优化-数据收敛
1、背景介绍
HRV测量仪器上传的数据#xff0c;每秒有250个数据#xff0c;业务上需要测量180秒#xff0c;预计有3w-5w个数据点需要绘制到折线图上去。Charts_painter绘制这么大的数据是时候会有些卡顿#xff0c;…Flutter-Charts_painter大数据量绘制性能优化-数据收敛
1、背景介绍
HRV测量仪器上传的数据每秒有250个数据业务上需要测量180秒预计有3w-5w个数据点需要绘制到折线图上去。Charts_painter绘制这么大的数据是时候会有些卡顿所以需要进行性能优化。
优化方向有两个1、缩减数据量 2、组件异步渲染。 Flutter暂时不支持异步离屏渲染所以我们的只能进行数据量缩减 2、优化方式 - 数据收敛
方案
每20个数据点收敛成两个保留最大值和最小值两个数据点这样数据就收敛了10倍并且保留数据特征需要判断20个数据点的走向趋势。通过最大值和最小值在原数据中的索引下标位置确定谁在前谁在后 static Listdouble handleBMData(Listdouble source) {Listdouble reslutList [];Listdouble partList [];source.asMap().forEach((key, value) {partList.add(value);if ((key 1) % 20 0) {double maxValue partList.reduce(math.max);double minValue partList.reduce(math.min);int maxIndex partList.indexWhere((element) element maxValue);int minIndex partList.indexWhere((element) element minValue);// int maxStep math.min(maxIndex, 9 - maxIndex);// int minStep math.min(minIndex, 9 - minIndex);// if (maxStep minStep) {// reslutList.add(maxValue);// } else if (maxStep minStep) {// reslutList.add(minValue);// } else {// if (maxIndex minIndex) {// reslutList.add(maxValue);// } else {// reslutList.add(minValue);// }// }if (maxIndex minIndex) {reslutList.addAll([minValue, maxValue]);} else {reslutList.addAll([maxValue, minValue]);}partList [];}});return reslutList;}3、效果展示
优化前数据密集折线抖动GPU渲染压力大 优化后数据分散折线能有效反映数据特征GPU渲染压力小 可见我们保留了原数据的数据特征同时将数据下降了一个量级让Charts_painter渲染性能直接指数级大幅提升 如果有码友能从异步渲染角度解决性能问题欢迎探讨
