JavaScript Remoting を使用したグラフデータの更新

このマークアップでは、グラフの data 属性を JavaScript 関数 retrieveChartData の名前に設定することで、グラフコンポーネントをデータソースに添付します。データはこの関数から返されます。関数の名前は文字列として指定します。

静的 HTML <select> メニューには、グラフで使用可能な年が表示されます。メニューは、どの種類のフォーム要素とも関連付けられておらず、値がコントローラに直接返送されることはありません。代わりに、<select> メニューの onChange 属性が、メニューが変更されたときには常に JavaScript 関数 refreshRemoteChart() をコールします。さらに 2 つの静的 HTML 要素として、ID を持つ <span> タグが 2 つあります。<span> タグは、ページ読み込み時は空で、JavaScript 経由で更新されると必要に応じて状況とエラーメッセージを表示します。

この図は、ページのさまざまなコンポーネント間のリンクを示しています。

グラフの初期読み込みシーケンスは単純です。RemotePieChart という <apex:chart> が retrieveChartData() をコールして初期データを取得し、retrieveChartData() はデータを取得すると RemotePieChart.show() をコールします。こうしてグラフが表示されます。

更新はもっと複雑です。新しい年が theYear メニューから選択されると、メニューの onChange イベントが起動され、refreshRemoteChart() 関数をコールします。次に refreshRemoteChart() が retrieveChartData() 関数をコールし、@RemoteAction が新しいデータを返すと、retrieveChartData() が (refreshRemoteChart() で提供されるコールバック経由で) RemotePieChart.reload() をコールします。こうしてグ��フが更新されます。

その他に、いくつか注意点があります。

• <apex:chart> は hidden="true" 属性を使用して、表示するデータが揃う前にグラフが表示されないようにします。グラフデータが読み込まれたら、retrieveChartData() 関数が RemotingPieChart.show() をコールしてグラフを表示します。これと RemotingPieChart.reload() によって、<apex:actionSupport> を使用して表示する場合よりもはるかに滑らかなグラフアニメーションを表示できます。
• refreshRemoteData() 関数は、retrieveChartData() をコールしてデータの更新を試みる前に、statusElement HTML <span> を「loading… (読み込み中)」メッセージに設定し、データが返されてグラフが更新されたら、匿名コールバック関数が空の文字列に設定してメッセージを非表示にします。基本的に同じ効果を得るために <apex:actionStatus> を使用する場合よりも作業が若干多くなります。同じ手法を使用して「busy (処理中)」アニメーションやグラフィックを簡単に表示できます。