[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

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

ロードおよび更新時に、プロット要素に対してアニメーション効果を有効化することで、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();