このトピックでは、チャートの Infragistics® Motion Framework™ の概要とチャート アニメーションを構成できる項目について説明します。
この題材を理解するのにあらかじめ必要となるトピック。
igDataChart の概要: このトピックは、igDataChart™ コントロールについて、その主要機能、最低必須事項、ユーザー機能といった事項の概念的情報を提供します。
igDataChart の追加: このトピックでは、igDataChart™ コントロールをページに追加し、データにバインドする方法を紹介します。
Infragistics Motion Framework はまるでデータについてのストーリーを語りかけているかのような感覚を提供し、その中でエンドユーザーは目的に合わせたカスタマイズが可能となり、アニメーション化されたユーザー エクスペリエンスを体現することができます。エンド ユーザーは、時間の流れとともに推移するデータ ポイントの動向を容易に確認できます。
Motion Framework の基本原理は、データを継続的にまたは一括でチャート コントロールに提供し、適切な API メソッドを呼び出してデータの変更に対応し、データを十分にカスタマイズできるアニメーション化された視覚表現でレンダリングすることです。
開発者は、Motion Framework を Ignite UI for jQuery チャート コントロールと併用することによって、ビジュアルを向上させ、データの背後にある傾向や意味をあますところなく表現することができます。
Infragistics Motion Network 対応の構成可能なチャート アニメーション項目のカタログです。
| 構成可能な要素 | 詳細 | プロパティ |
|---|---|---|
| 切り替え間隔 | データ シリーズごとに、特定のデータ変更のアニメーション時間を定義できます。 | jQuery: series[“key”].transitionDuration MVC: Series.TransitionDuration() |
| すべてのデータ項目が置き換えられたことを示す通知 | 項目が指定されたデータ ソースからクリアされたことをチャートに通知します。 | |
| データ項目挿入の通知 | 項目が指定されたデータ ソースの指定されたインデックスに挿入されたことをチャートに通知します。 | |
| データ項目削除の通知 | 項目が指定されたデータ ソースの指定されたインデックスから削除されたことをチャートに通知します。 | |
| データ項目変更の通知 | 項目が指定されたデータ ソースに設定されたことをチャートに通知します。 | |
| データ項目追加の通知 | 新しい項目がデータ ソースに追加されたことをチャートに通知します。 | |
| データ項目挿入の通知 | 新しい項目がデータ ソースに挿入されたことをチャートに通知します。 | |
| データ項目削除の通知 | 新しい項目がデータ ソースから削除されたことをチャートに通知します。 | |
| データ項目更新の通知 | 項目がデータ ソースで更新されたことをチャートに通知します。 |
以下のサンプルでは、igDataChart で Motion Framework™ を使用し、データの推移を効果的に視覚化しています。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
このトピックでは、コード例を使用して、HTML および JavaScript で簡単なアニメーション化された柱状チャートを追加する方法を示します。
このトピックでは、コード例を使用して、AJAX POST 要求を使用してデータを動的に追加しているMVC で、簡単なアニメーション化された柱状チャートを追加する方法を示します。
オンラインで表示: GitHub