インフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社Blogインフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Hatebuこんにちは!ソリューションコンサルタントの中江です。チャートコンポーネントとその他いくつかのコンポーネントを組み合わせて、動きのあるチャート表現を実装したサンプルアプリケーションをご紹介します。サンプルコードはダウンロードいただけますので、チャート表現のご参考に是非ご利用ください。ATPポイントランキングサンプルアプリケーションの実際の挙動は以下よりご確認いただけます。サンプルを確認するスクリーンキャストでも動作イメージをご紹介します。こちらのサンプルアプリケーションでは、2008~2017年の10年間の男子テニスシングルスにおいて、世界ランキングを決定する際の指標となるATPポイントの上位トップ10の推移をグリッドとチャートを用いて表現しています。公開されているオープンデータをJSON形式で利用しています。ミリ秒毎にデータソースを切り替えることで、グリッドとチャートに表示される情報を更新し、結果としてアニメーションのような表現となっています。したかの情報を利用しています。}]サンプルに使用しているコンポーネント今回のサンプルでは、データグリッド・データチャート・スライダーの3つのコンポーネントを組み合わせています。赤枠:データグリッド青枠:データチャート緑枠:スライダーデータグリッド表形式でデータを表示するコンポーネントです。データの切り替わったタイミングで、前回より順位が上がった/下がった場合に、アイコンと背景色で装飾を行うことによってその状況を可視化しています。機能を利用しています。データチャートさまざまなチャート表現を実現するためのコンポーネントです。2種類のチャートを重ねて実装しています。使って、現在データの位置を表す円形の表現と対応する選手名の表示を行なっています。スライダーつまみを操作するような形で指定した範囲のデータ値を切り替えることのできるコンポーネントです。このコンポーネントに時間軸のデータを年月の古い順に与え、数ミリ秒毎に次の時間軸に切り替えることによって、自動的にスライダーの値が変更される動作を実装しています。スライダーの値変更のイベントによって、対応する年月のデータでグリッドおよびチャートの表示を切り替える処理を行なっています。ソースのダウンロード以下よりソースコードをダウンロードいただけます。サンプルをダウンロードまとめこのように、幾つかのコンポーネントを組み合わせることによって、より目を引くアニメーション表現を実装するといったことも可能になります。コンポーネントの従来の利用方法だけに囚われず、自由な発想で開発を行なっていただければと思います。コンポーネントの利用方法などのお問い合わせに関してもお気軽にご相談ください。トライアル板での試用が可能です。アカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。お気軽にお問い合わせください。そのほか、製品デモや、弊社製品そのものに関するご相談だけでなく、システム開発における様々なご相談も実施可能な無料相談会も随時受け付けています。ツリーグリッド、カラムプロパティ、その他多数!こんにちは、インフラジスティックス・ジャパンです。»Aboutインフラジスティックス・ジャパンのチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。Reserved引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。