要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。Toolkitのチャート・コンポーネントに用意された多彩なグラフと、それらをカスタマイズして見栄えのするグラフを描画する方法を解説しました。後編は、アニメーションなどを使ったインタラクティブな効果を実装する方法や、グラフをリアルタイムに更新する方法、グラフのズームやスクロールを実現する方法を解説します。Toolkitのチャート・コンポーネントに用意された多彩なグラフと、それらをカスタマイズして見栄えのするグラフを描画する方法を解説しました。今回は、よりダイナミックな機能、例えばアニメーションなどを使ったインタラクティブな効果を実装する方法や、グラフをリアルタイムに更新する方法、グラフのズームやスクロールを実現する方法を解説します。イベント処理Char2DのconnectToPlot()メソッドを呼び出して、指定したplotにより描画されたマーカーや領域でのクリックやマウス・オーバーのイベントを処理する関数を登録できます。「グラフの描画コンポーネントをクリックすると、別ページへジャンプ」といった関数を登録すれば、ページ遷移の一部としても使用できます。次のような定義済みのアクションを指定することで、マウスオーバー時の効果を簡単に実装することもできます。ToolkitにはデータAPIと呼ばれるフレームワークが提供されています。詳細は次回の記事で解説する予定ですが、簡単に述べると、さまざまなフォーマットのデータにアクセスするための共通インターフェースを提供するものです。グラフを描画する際に、ウェブ上のサービスやデータベース・サーバからデータを取得する必要があるかもしれません。そのとき、このAPIを利用することで、データ・ソースやバックエンドのサービスの詳細を隠蔽、抽象化し、クライアント側でのデータへのアクセスをデータ・ソースやサービスに依存しない方法で記述できるのです。データAPIを利用して、グラフで表示するデータを取得するには、dojox.charting.DataSeriesを利用できます。これはグラフの系列とデータAPIを結び付けるためのクラスです。このインスタンスをdojox.charting.Chart2DのaddSeriesの引数に渡すと、結び付けられたデータをグラフに直接描画できます。データAPIを利用することで、描画するデータを容易に更新できます。サーバからJSON形式でデータを受け取ってグラフに表示することもできるので、グラフをリアルタイムで更新する際にも便利です。ここでは、例として架空のある日の日経平均株価の推移を表示することを考えましょう。縦軸は平均株価を、横軸は時間を表しているとします。dojox.charting.DataSeriesとデータAPIの実装クラスdojo.data.ItemFileWriteStoreを読み込んでおきます。使用するテーマも読み込んでおきます。dojo.require("dojox.charting.DataSeries");dojo.require("dojo.data.ItemFileWriteStore");dojo.require("dojox.charting.themes.PrimaryColors");次にグラフを表示します。描画するデータはデータAPIで与えます。ソフトウェア開発研究所に勤務。3.12」の最初のベータ版がリリース新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。