带有谷歌图表指令/加载数据的MD标签的视觉性能



我有一个使用Angular Material和Google Charts的Apache Cordova应用程序。对于后者,我使用的是此处的指令:https://github.com/angular-google-chart/angular-google-chart。

该应用程序用于显示分析数据。这些图表按每小时、天、周和月的图表分隔。对于这种分离,我使用 md-tabs 指令,每个指令都有一个选项卡。

现在从技术上讲,一切正常。我有 4 个选项卡,在这些选项卡内,每个选项卡有两个图表。我有一些代码设置,用于查询后端API,获取数据并将其绑定到我的图形对象。他们呈现数据,一切都很好。

直到。。。。用户从一个选项卡切换到另一个选项卡。虽然这行得通,但过渡远非顺利。我想那是因为它在幕后做各种阻碍渲染的事情。顺便说一下,这是我们正在谈论的智能手机应用程序。现在我知道你不能指望Cordova应用程序的原生渲染性能,但我很确定它应该能够做得更好。

所以我现在正在寻找改善这一点的方法。例如,有没有一种好方法可以推迟数据加载,直到视觉对象完成转换?我更喜欢流畅的 UI 而不是加载数据,只要差异不是几秒钟。我还想要一个加载指示,以便在加载数据时覆盖选项卡内容。一旦用户切换选项卡,我希望过渡顺利进入新选项卡的加载指示器,该指示器将显示到数据存在并呈现为止。

我尝试过弄乱ng-if和ng-show以及这种帮助,但不知何故,这一切都感觉有点不稳定。所以我正在寻找有关这些类型场景的一些指导,一定有一些最佳实践或其他东西?这也是为什么目前我不分享任何代码,因为我想要最好的解决方案,而不是基于我已经拥有的东西的解决方案(这很可能是次优的,我对 Angular 相对较新)。

我最近正在研究 md-tabs 并遇到了类似的问题。我尝试使用 md-enable-disconnect="true",这是 md-tabs api 中的一个实验属性,它为我提高了一点性能。您可以从下面的网址中参考有关此的简短解释。希望这有帮助

https://material.angularjs.org/latest/api/directive/mdTabs

任何平台上的图表呈现性能都很容易受到大量数据点的阻碍。 如果您的数据集中有更多数据可供用户在小型低性能设备上实际查看和使用,请考虑在应用使用数据之前汇总数据。 这可能会提高渲染性能。 当然,如何汇总将完全取决于数据是什么以及如何使用数据。

最新更新