このトピックは、igDataChart
™ コントロールのトランジション アニメーション機能およびサポートされるシリーズのリストについての情報を提供します。
このトピックを理解するためには、以下のトピックを理解しておく必要があります:
このトピックでは、igDataChart
™ コントロールをページに追加し、データにバインドする方法を紹介します。
このトピックは、以下のセクションで構成されます。
この機能は、新しいデータ ソースを読み込むときのシリーズのアニメーション化を可能にします。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、columnSeries
は x 軸から上昇するアニメーション、lineSeries
は y 軸から描画するアニメーションを再生します。シリーズのアニメーションについて、トランジション アニメーション サンプルおよびトランジション アニメーション (財務) を参照してください。
isTransitionInEnabled
プロパティを true
に設定すると、アニメーション化されたトランジションを有効にします。
デフォルトで、アニメーション化されたトランジションは無効になっています。
アニメーション化されたトランジションのトランジション タイプ、データ ポイントに相対するスピード、およびイージング関数によって管理されるイージング トランジションを構成できます。
以下のシリーズ タイプはトランジション アニメーション機能をサポートします:
移動および方向に基づいて複数のアニメーション トランジションのタイプがサポートされます。
fromZero
- シリーズが数値軸の参照値からトランジションします。accordionFromLeft
- シリーズは左側からアコーディオンします。accordionFromRight
- シリーズは右側からアコーディオンします。accordionFromTop
- シリーズは上側からアコーディオンします。accordionFromBottom
- シリーズは下側からアコーディオンします。accordionFromCategoryAxisMinimum
- シリーズはカテゴリ軸の最小値からアコーディオンします。accordionFromCategoryAxisMaximum
- シリーズはカテゴリ軸の最大値からアコーディオンします。accordionFromValueAxisMaximum
- シリーズは値軸の最大値からアコーディオンします。accordionFromValueAxisMinimum
- シリーズは値軸の最小値からアコーディオンします。expand
- シリーズは値の中点から展開します。sweepFromLeft
- シリーズは左側からスイープします。sweepFromRight
- シリーズは右側からスイープします。sweepFromTop
- シリーズは上側からスイープします。sweepFromBottom
- シリーズは下側からスイープします。sweepFromCenter
- シリーズは中央からスイープします。sweepFromCategoryAxisMaximum
- シリーズはカテゴリ軸の最大値からスイープします。sweepFromCategoryAxisMinimum
- シリーズはカテゴリ軸の最小値からスイープします。sweepFromValueAxisMaximum
- シリーズは値軸の最大値からスイープします。sweepFromValueAxisMinimum
- シリーズは値軸の最小値からスイープします。トランジションのスピード タイプは、アニメーション化されたトランジションが再生されているときに、現在シリーズの項目に相対するスピードを決定します。以下のはスピード タイプです:
auto
- 自動的にスピード タイプを選択します。indexScaled
- データ ポイントのインデックスが軸基点から離れるほど、ポイントへの到着は遅くなります。normal
- すべてのスピードは標準です。データ ポイントが同時に表示されます。random
- データ ポイントは時間的にランダムに表示されます。valueScaled
- データ ポイントの値が開始ポイントから離れるほど、ポイントへの到着が遅くなります。イージング関数は、アニメーションのイーズ インする方法を決定します。イージング関数を適用できます。デフォルト値は cubicEase
です。
トランジション タイプは、transitionInMode
プロパティを任意のトランジション名に設定して構成します。プロパティを "auto" (デフォルト値) に設定すると、シリーズ タイプに基づきトランジション タイプを自動的に選択することもできます。
以下の例は、財務チャートでトランジション イン アニメーションを有効にして変更する方法を紹介します。
以下のトピックでは、このトピックに関連する追加情報を提供しています。
このトピックでは、igDataChart
™ コントロールをページに追加する方法を紹介します。
and bind it to data.
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub