Wijmoの使い方
チャート
機能
アニメーション
5.20241.9
5.20241.9

チャート：アニメーション

ロードおよび更新時に、プロット要素に対してアニメーション効果を有効化することで、FlexChart、FlexPie、およびFinancialChartのユーザーエクスペリエンスを向上させることができます。

アニメーションを有効にするには、ChartAnimationオブジェクトを作成して、継続時間、イージング関数、アニメーションモードなどの主要プロパティと共にチャートコントロールインスタンスを渡します。

  • animationMode：データポイントをどのようにアニメーションするか（一度にすべてをアニメーション、ポイントごとにアニメーション、系列ごとにアニメーション）を指定します。アニメーション全体は継続時間内に完了します。
  • All：すべてのポイントと系列を一度にアニメーションします。
  • Point：アニメーションがポイントごとに実行されます。複数の系列が同時にアニメーションします。
  • Series：アニメーションが系列ごとに実行されます。"All"オプションと同様に系列全体が一度にアニメーションされますが、一度に1つの系列のみがアニメーションします。
  • easing：イージング関数がアニメーションに適用されます。
  • duration：アニメーションの長さです（ミリ秒単位）。

例：

import * as chart from '@mescius/wijmo.chart';
import * as animation from '@mescius/wijmo.chart.animation';

var chartAnimation = new animation.ChartAnimation(myChart, {
    animationMode: wijmo.chart.animation.AnimationMode.All,
    easing: wijmo.chart.animation.Easing.Swing,
    duration: 400
});

アニメーションを有効にすると、チャートをロードおよび更新するときにアニメーションが自動的に実行されます。アニメーションをプログラムから実行するには、animateメソッドを呼び出します。

例：

myChart.animate();

イージング関数

アニメーションに適用されるイージング関数を設定することで、アニメーションをさらに詳細に設定できます。FlexChartは、3次イン/アウト、弾性イン/アウト、バウンドイン/アウト、線形などの標準イージング関数をサポートしています。

  • Linear
  • Swing
  • EaseInQuad
  • EaseOutQuad
  • EaseInOutQuad
  • EaseInCubic
  • EaseOutCubic
  • EaseInOutCubic
  • EaseInQuart
  • EaseOutQuart
  • EaseInOutQuart
  • EaseInQuint
  • EaseOutQuint
  • EaseInOutQuint
  • EaseInSine
  • EaseOutSine
  • EaseInOutSine
  • EaseInExpo
  • EaseOutExpo
  • EaseInOutExpo
  • EaseInCirc
  • EaseOutCirc
  • EaseInOutCirc
  • EaseInBack
  • EaseOutBack
  • EaseInOutBack
  • EaseInBounce
  • EaseOutBounce
  • EaseInOutBounce
  • EaseInElastic
  • EaseOutElastic
  • EaseInOutElastic

軸のアニメーション

ChartAnimation オブジェクトの axisAnimation プロパティを設定することにより、軸にもアニメーションを適用することができます。

例：

chartAnimation.axisAnimation = true;

更新アニメーション

ChartAnimationは、更新時にも適用されます。アニメーションを設定したら、ソースコレクションにポイントを挿入または削除することで、チャートのデータソースを簡単に更新できます。

例：

// 開始位置にポイントを挿入します
myChart.itemsSource.insert(0, getMyDataItem());
// 終了位置にポイントを挿入します
myChart.itemsSource.push(getMyDataItem());
// 開始位置のポイントを削除します
myChart.itemsSource.removeAt(0);
// 終了位置のポイントを削除します
myChart.itemsSource.pop();

getMyDataItemメソッドはプレースホルダとして使用されており、これは、連結タイプに一致するデータオブジェクトに置き換える必要があります。

動的チャートアニメーション

FlexChartはCollectionViewクラスをデータソースとして使用しているため、データに加えた変更はチャートに自動的に反映されます。このCollectionViewは、collectionViewプロパティによって公開されます。また、このコレクションにポイントを追加または削除すると、チャートにその変更が反映されます。

例：

// 新しいポイントを付加し、古いポイントを削除します
var arr = myChart.collectionView.sourceCollection;
var pt = arr[arr.length - 1];
var y = pt.y;
for (var i = 0; i < 10; i++) {
    y += Math.random() - .5;
    arr.push({ x: pt.x + i + 1, y: y });
    arr.splice(0, 1);
}

// コレクションビューとチャートを更新します
myChart.collectionView.refresh();
myChart.refresh();