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

ChartAnimation は、チャートをロードおよび更新する際に組み込みのアニメーションを提供します。アニメーションは、時間、イージング関数、アニメーションモードなどのプロパティを使用して設定できます。ChartAnimationプロパティは、FlexChart、FinancialChart、FlexPieで使用できます。

次のコード例は、時間、イージング、アニメーションモードなどのプロパティを使用して、チャートアニメーションを有効にする方法を示します。この例では、「クイックスタート」セクションで作成したサンプルを使用します。

Razor	コードのコピー
@using ChartAnimation.Models @model IEnumerable<FruitSale> @(Html.C1().FlexChart() .Bind("Date", Model) .ChartType(C1.Web.Mvc.Chart.ChartType.Column) .Series(sers => { sers.Add() .Binding("SalesInJapan") .Name("日本での売上"); }) .ShowAnimation(ca => ca.AnimationMode(AnimationMode.All).AxisAnimation(true).Duration(1000).Easing(Easing.Linear))) )

Razor

コードのコピー

@using ChartAnimation.Models
@model IEnumerable<FruitSale>
@(Html.C1().FlexChart()
.Bind("Date", Model)
.ChartType(C1.Web.Mvc.Chart.ChartType.Column)
.Series(sers =>
{       sers.Add()
   .Binding("SalesInJapan")
   .Name("日本での売上");
})
.ShowAnimation(ca => ca.AnimationMode(AnimationMode.All).AxisAnimation(true).Duration(1000).Easing(Easing.Linear)))
)

チャートアニメーションクラス

次のプロパティを使用して、チャートでアニメーションを有効にできます。

名前	タイプ	説明
AnimationMode	アニメーションモード	プロットポイントのアニメーション表示を一度に1つずつ行うか、系列ごとに行うか、または一度にすべて行うかを取得または設定します。アニメーション全体は時間内に完了します。
AxisAnimation	Boolean	アニメーションが軸に適用されるかどうかを示す値を取得または設定します。
Duration	Integer	アニメーション全体の長さ（ミリ秒）を取得または設定します。
Easing	イージング	アニメーションに適用されるイージング関数を取得または設定します。

AnimationMode列挙体

AnimationModeを使用すると、ポイント、系列、またはその両方にアニメーションを適用できます。

名前	説明
All	すべてのポイントと系列が一度にアニメーションします。
Point	アニメーションがポイントごとに実行されます。複数の系列が同時にアニメーションします。
Series	アニメーションが系列ごとに実行されます。"All"オプションと同様に系列全体が一度にアニメーションされますが、一度に1つの系列だけがアニメーションします。