角度材料とGoogle Chartsを使用するApache Cordovaアプリがあります。後者の場合、私はここにあるディレクティブを使用しています:https://github.com/angular-google-chart/angular-google-chart。md-tabの視覚的パフォーマンスとGoogleグラフの指示/データの読み込み
このアプリケーションは、分析データを表示します。グラフは時間、日、週、および月ごとにグラフで区切られています。この分離のために、私はmd-tabsディレクティブを使用しています。それぞれにタブがあります。
技術的にはすべてが機能します。私は4つのタブを持っており、これらのタブの中に私はタブごとに2つのグラフを持っています。バックエンドAPIをクエリし、データをフェッチし、それを自分のグラフオブジェクトにバインドするコード設定がいくつかあります。彼らはデータをレンダリングし、すべて正常です。
...までユーザーはあるタブから別のタブに切り替わります。それは機能しますが、トランジションは滑らかではありません。私はそれがレンダリングの妨げになるシーンの背後にあるあらゆる種類のものをやっているからだと思います。ところで、これは私たちが話しているスマートフォンアプリです。今では、Cordovaアプリケーションからのネイティブレンダリングのパフォーマンスを期待できないことを知っていますが、これよりもうまくいくはずです。
これを改善する方法を探しています。たとえば、ビジュアルの移行が完了するまで、データロードを延期するのに良い方法がありますか?私は違いが秒でない限り、データをロードするには滑らかなUIを好む。私はまた、データがロードされている間にタブの内容をオーバーレイするローディング指示をしたいと思います。ユーザーがタブを切り替えるとすぐに、移行が新しいタブのローディングインジケータにスムーズに移行し、データがそこにありレンダリングされるまで表示されることが期待されます。
私はng-ifとng-showを使いこなしてみましたが、この種の助けになりましたが、なんとなくちょっと怪しい気がします。だから私はこれらのシナリオのいくつかのガイダンスを探していますが、いくつかのベストプラクティスや何かが必要でしょうか?これはまた、現時点では、私が既に持っているものに基づいた最適な解決策ではなく、最良の解決策を必要とする理由を共有しているわけではない(これはおそらく準最適である。
チャートが表示される前に描画されていることが1つあります。チャートやグラフ領域のサイズが明示的に設定されていないと、描画時にグラフが正しく表示されません。 – WhiteHat
@WhiteHatが同意します。チャートが表示されますだから簡単な修正はオプションオブジェクトに幅と高さを含めることでしょうか?そして固定率はパーセンテージよりも優れていますか? – Jasper
右、固定、または特定のサイズを設定したくない場合は、タブが選択されるまで待って、グラフを描画する前に - > [例](http://stackoverflow.com/a/35868433/5090771) – WhiteHat