2

ドラッグ アンド ドロップ インターフェイスを使用してグラフを作成できるグラフ作成アプリケーションを作成しています。

ハイチャートがあり、 highcharts-ngディレクティブを使用しています。

このディレクティブは、タイトル、オプション、およびシリーズを監視します。そして、人が変更を加えると、私はそれらを処理し、オプション オブジェクトに変更を加えます。次に、highcharts-ng がチャートを再描画します。

私が見つけた問題は、options.xAxis や options.yAxis などの行のいくつかのプロパティを変更することです。これを行うたびに、変更ごとに再描画が開始されるため、アプリケーションが少し遅れます。

では、効率的でありながら、これにアプローチする角度のある方法は何でしょうか?

私が考えた潜在的な解決策は、フラグを highcharts-ng ディレクティブに追加し、それが変更されるたびにトリガーすることでした。そして、データの処理が完了したら変更します。別の考えられる解決策は、highchart-ng ディレクティブ内で特定のイベントをリッスンし、そのイベントが受信されるたびに再描画をトリガーすることです。しかし、これらのソリューションは、私には少しハッキリしているように見えます。

4

1 に答える 1

5

Angular は独自のダーティー チェックを行い、対応するビュー モデルが変更されるたびに、DOM の Angular で制御されるセクションを (理想的には常に、しかし実際には) 書き換えます。この動作は Angular にとって非常に基本的なものなので、それが気に入らない場合は、回避するか、別のデータバインディング フレームワークを使用することをお勧めします。

私がお勧めする回避策は、基本的に、最初のオプションで説明したものです。つまり、ビューモデル内のビューモデルです。ディレクティブのスコープ内に、関心のある変更、つまり再描画するよりも頻繁に発生する変更を追跡するプライベート変数を用意します。次に、再描画の準備ができたら (「準備完了」を決定するための独自のロジックが必要になります...時間?特定の種類の変更?特定の変更のしきい値?)、プライベートを設定して実際のビューモデルを更新しますリアル ビュー モデルの元のフィールドに戻ります。

コード スケッチ:

// (inside the directive)

var _options = $scope.options;

// ...
// rapidfire updates happen; save them to _options rather than $scope.options

// ...
// now you're ready to redraw:

$scope.options = _options; // angular now knows $scope is dirty and triggers the redraw
于 2013-08-09T19:43:08.267 に答える