Flutter 图表建议

Question

我正在使用 Firebase 实时数据库开发应用程序，想使用样条图可视化数据，我尝试了 syncfusion_flutter_charts 它真的很好，但是渲染速度太慢（根据调试器），它甚至不是完整的数据，所以 syncfusion 是一个不错的选择，或者我应该改变，如果有任何提示可以使图表渲染更快或应用程序总体上更快。

图表小部件代码：

SfCartesianChart(
                    plotAreaBorderWidth: 0.0,
                    primaryXAxis: DateTimeAxis(
                      minimum: _getToday(),
                      maximum: _getTomorrow(),
                      majorGridLines: const MajorGridLines(width: 0),
                      intervalType: DateTimeIntervalType.hours,
                      desiredIntervals: 2,
                      interval: 2,
                      dateFormat: DateFormat.H(),
                    ),
                    primaryYAxis: NumericAxis(
                      majorGridLines: const MajorGridLines(width: 0),
                      axisLine: const AxisLine(width: 0.0),
                    ),
                    series: <ChartSeries<VitalModel, DateTime>>[
                      SplineAreaSeries<VitalModel, DateTime>(
                        dataSource: data,
                        xValueMapper: (VitalModel sales, _) => sales.x,
                        yValueMapper: (VitalModel sales, _) => sales.yValue,
                        splineType: SplineType.cardinal,
                        cardinalSplineTension: .5,
                        borderWidth: 2,
                        borderColor: color,
                        onCreateShader: (ShaderDetails details) {
                          return ui.Gradient.linear(details.rect.topCenter,
                              details.rect.bottomCenter, <Color>[
                            color,
                            Colors.transparent,
                          ]);
                        },
                      )
                    ]),

Answer 1

我们检查了你的代码片段，在你的查询中，你提到渲染一个系列大约需要 1700 毫秒，但没有提到你的样本中使用的数据点数量。那么，能否请您提及您在示例中使用的数据点数量，这将对我们更有帮助。

当您从 firebase 获取数据时，从数据库获取数据可能需要一些时间。那么你能不能在获取数据后检查渲染持续时间。
如果您不打算使用 SplineSeries 并寻找线型系列，我们建议您使用 FatsLineSeries，这将帮助您快速渲染图表并提高性能。
您是否尝试从 firebase 更新实时数据，我们建议使用 updateDataSource public 方法来更新数据点，而不是调用 setState() 方法。在使用 setState() 时，它将 re-render 整个小部件。但是在 updateDataSource 中，它更新的只是最新添加的数据点，而不是整个小部件。能否请您参考下面的知识库和UG了解更多详情。
您也可以将animationDuration的值设置为0来禁用系列动画，这样会减少渲染时长。

UG：https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource

知识库：https://www.syncfusion.com/kb/12316/how-to-create-flutter-real-time-charts-using-the-cartesian-charts-widget-sfcartesianchart

Flutter 图表建议

Flutter charts advice

performance

charts

syncfusion

dart

flutter