アニメーション

組み込みのアニメーション API を使用することで、ほぼすべてのプロット要素をアニメーションできます。組み込みのアニメーションオプションを使用して、C1Chart コントロールのプロット要素に、さまざまな視覚的なアニメーション効果を簡単に作成できます。PlotElementAnimation クラスに含まれるプロパティは、次のとおりです。

プロパティ	説明
PlotElementAnimation.IndexDelay Attached	要素のポイントインデックスに基づいてアニメーションの遅延を指定できる添付プロパティ。
PlotElementAnimation.Storyboard	プロット要素に適用されるストーリーボードを取得または設定します。
PlotElementAnimation.SymbolStyle	ストーリーボードが開始する前にプロット要素に適用されるシンボルスタイルを取得または設定します。

C1Chart コントロールのアニメーション表示には、LoadAnimation も使用されます。

組み込みのアニメーションオプションを使用してアニメーション効果を設定するために、次の XAML マークアップを使用できます。

	コードのコピー
<c1chart:C1Chart Name="chart"> <c1chart:C1Chart.Data> <c1chart:ChartData> <c1chart:ChartData.LoadAnimation> <!-- アニメーションをロードします --> <c1chart:PlotElementAnimation> <!-- 初期スタイル：非表示 --> <c1chart:PlotElementAnimation.SymbolStyle> <Style TargetType="c1chart:PlotElement"> <Setter Property="Opacity" Value="0" /> </Style> </c1chart:PlotElementAnimation.SymbolStyle> <c1chart:PlotElementAnimation.Storyboard> <Storyboard > <!-- インデックスディレイを使用して要素を表示します --> <DoubleAnimation Storyboard.TargetProperty="Opacity" c1chart:PlotElementAnimation.IndexDelay="0.5" To="1" Duration="0:0:1" /> </Storyboard> </c1chart:PlotElementAnimation.Storyboard> </c1chart:PlotElementAnimation> </c1chart:ChartData.LoadAnimation> </c1chart:ChartData> </c1chart:C1Chart.Data> </c1chart:C1Chart>

コードのコピー

<c1chart:C1Chart Name="chart">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData>
                    <c1chart:ChartData.LoadAnimation>
                        <!-- アニメーションをロードします -->
                        <c1chart:PlotElementAnimation>
                            <!-- 初期スタイル：非表示  -->
                            <c1chart:PlotElementAnimation.SymbolStyle>
                                <Style TargetType="c1chart:PlotElement">
                                    <Setter Property="Opacity" Value="0" />
                                </Style>
                            </c1chart:PlotElementAnimation.SymbolStyle>
                            <c1chart:PlotElementAnimation.Storyboard>
                                <Storyboard >
                                    <!-- インデックスディレイを使用して要素を表示します -->
                                    <DoubleAnimation
                   Storyboard.TargetProperty="Opacity"
                   c1chart:PlotElementAnimation.IndexDelay="0.5"
                   To="1" Duration="0:0:1" />
                                </Storyboard>
                            </c1chart:PlotElementAnimation.Storyboard>
                        </c1chart:PlotElementAnimation>
                    </c1chart:ChartData.LoadAnimation>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
        </c1chart:C1Chart>

次に、InitializeComponent() メソッドのすぐ下に次のコードを挿入します。

	コードのコピー
var rnd = new Random(); chart.MouseLeftButtonDown += (s, e) => { chart.Data.Children.Clear(); // 新しいデータを作成します var vals = new double[rnd.Next(5, 10)]; for (int i = 0; i < vals.Length; i++) vals[i] = rnd.Next(0, 100); chart.Data.Children.Add(new DataSeries() { ValuesSource = vals }); };

コードのコピー

var rnd = new Random();
            chart.MouseLeftButtonDown += (s, e) =>
            {
                chart.Data.Children.Clear();
                // 新しいデータを作成します
                var vals = new double[rnd.Next(5, 10)];
                for (int i = 0; i < vals.Length; i++)
                    vals[i] = rnd.Next(0, 100);
                chart.Data.Children.Add(new DataSeries() { ValuesSource = vals });
            };

これで、アプリケーションを実行すると、データはマウスクリックでリロードされ、上記のマークアップで設定されたアニメーション効果を表示します。