具有 google 图表指令/加载数据的 md-tabs 的视觉性能
visual performance of md-tabs with google charts directive / loading data
我有一个使用 Angular Material 和 Google 图表的 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 中的一个实验属性，它提高了 me.You 的一点性能请参考下面 url 对此的一个小解释。希望这有帮助
任何平台上的图表渲染性能很容易受到大量数据点的阻碍。如果您的数据集中有更多用户可以在小型低性能设备上实际看到和使用的数据，请考虑在应用使用数据之前汇总您的数据。这可能会提高渲染性能。当然，如何总结完全取决于数据是什么以及数据的使用方式。
我有一个使用 Angular Material 和 Google 图表的 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 中的一个实验属性，它提高了 me.You 的一点性能请参考下面 url 对此的一个小解释。希望这有帮助
任何平台上的图表渲染性能很容易受到大量数据点的阻碍。如果您的数据集中有更多用户可以在小型低性能设备上实际看到和使用的数据，请考虑在应用使用数据之前汇总您的数据。这可能会提高渲染性能。当然，如何总结完全取决于数据是什么以及数据的使用方式。