自定义渲染器实现高性能图表的核心是绕过Widget层重建，直接在Canvas或RenderObject层面控制绘制，仅在必要时重绘必要区域。
直接用自定义渲染器实现高性能图表，核心是绕过 Widget 层的频繁重建，把绘制逻辑下沉到 Canvas 和 RenderObject（或等效底层）层面。它不是“画得更炫”，而是“只在必要时重绘、只重绘必要区域、不带冗余开销地更新”。
避开 Widget 重建瓶颈
普通图表组件（比如用 StatefulWidget + CustomPaint）每次数据变化都会触发 build() → createElement() → mount() 流程，哪怕只是改一个点的数值，整个 Widget 树都要走一遍。而自定义渲染器（如 Flutter 的 RenderBox 或 MPAndroidChart 的 Renderer）只响应数据变更信号，调用 markNeedsPaint() 就能跳过构建阶段，直接进入 paint() 绘制。
- Flutter 中：继承 RenderBox，用 updateData() 对比新旧数据，仅在不同时调用 markNeedsPaint()
- MPAndroidChart 中：继承 LineChartRenderer 或实现 IShapeRenderer，复用已有 DataSet，重写 drawData() 而非重建 Chart
- vue-echarts 中：通过 initOptions.renderer = 'canvas' 固定底层，再用 setOption({ series: [...] }) 触发局部更新，避免重新 init
控制绘制粒度与坐标映射
高性能不等于“全图重画”，关键在于把数据坐标精准转为屏幕坐标，并只绘制可见区域。自定义渲染器让你完全掌控这个过程。
- 预计算缩放比例：例如 y 方向用 height - (value / maxValue) * height * 0.8，避免每帧重复除法
- 跳过不可见点：遍历 dataPoints 时，先判断 x 是否在 viewPortHandler.contentLeft ~ contentRight 范围内
- 路径复用：用 Path.moveTo() / lineTo() 构建单条折线，比画 N 个独立 LinePainter 更省 GPU 指令
支持增量更新与交互响应
真正高负载场景（如实时股价、传感器流）需要毫秒级响应。自定义渲染器可结合状态标记和事件钩子，做到“数据来即画、触摸即反馈”。
- Flutter：在 RenderBox 中重写 hitTestSelf()，快速判定点击是否落在折线上，再触发 tooltip 更新
- MPAndroidChart：复写 drawExtras() 方法，在原图上叠加动态标注、参考线或闪烁高亮区
- react-base-table 类比思路：虽非图表，但其 cellRenderer 的 isScrolling 参数提示“当前是否处于滚动中”，可据此降级绘制精度（如隐藏次要装饰）
注意边界与取舍
自定义渲染器不是银弹。它带来性能提升的同时，也意味着放弃部分框架便利性。
- 不自动响应 MediaQuery 变化：尺寸变更需手动监听并调用 markNeedsLayout()
- 动画需自行管理：不能直接用 AnimatedBuilder，要配合 AnimationController + markNeedsPaint()
- 调试难度上升：无法用 Flutter DevTools 查看 widget 树，需依赖 canvas debug 或日志打点
