Visualforce 開発者ガイド
j<apex:actionSupport> を使用したグラフデータの更新
ユーザーのアクションに応じて Visualforce グラフを更新するには、<apex:actionSupport> コンポーネントを、グラフのデータに影響する Visualforce ユーザーインターフェース要素に追加します。
次のマークアップでは、グラフの横にあるメニューから新しい年を選択して更新可能な円グラフを表示します。
1<apex:page controller="PieChartRemoteController">
2 <apex:pageBlock title="Charts">
3
4 <apex:pageBlockSection title="Standard Visualforce Charting">
5
6 <apex:outputPanel id="theChart">
7 <apex:chart height="350" width="450" data="{!pieData}">
8 <apex:pieSeries dataField="data" labelField="name"/>
9 <apex:legend position="right"/>
10 </apex:chart>
11 </apex:outputPanel>
12
13 <apex:form>
14 <apex:selectList value="{!chartYear}" size="1">
15 <apex:selectOptions value="{!chartYearOptions}"/>
16 <apex:actionSupport event="onchange" reRender="theChart"
17 status="actionStatusDisplay"/>
18 </apex:selectList>
19 <apex:actionStatus id="actionStatusDisplay"
20 startText="loading..." stopText=""/>
21 </apex:form>
22
23 </apex:pageBlockSection>
24
25 </apex:pageBlock>
26</apex:page>このマークアップでは、グラフの data 属性を Visualforce 式 {!pieData} に設定することで、グラフコンポーネントをそのデータソースに添付します。式は、getPieData() コントローラーメソッドをコールし、コントローラーメソッドからデータが返されます。グラフは、theChart という id 属性を持つ <apex:outputPanel> でラップされます。
<apex:form> コンポーネントは、グラフの更新が必要な場合に、ページのコントローラーに新しい年を返送するために使用されます。<apex:selectList> タグは、グラフで使用可能な年を表示し、子 <apex:actionSupport> タグは、メニューが変わると常にフォームを送信します。グラフの <apex:outputPanel> の id である theChart は、<apex:actionSupport> reRender 属性で、ページ全体を再読み込みするのではなく、更新をグラフのみに制限するために使用されます。さらに、<apex:actionStatus> コンポーネントは、グラフの更新中に状況メッセージを提供します。短いテキストメッセージをアニメーショングラフィックやテキスト効果で簡単に置き換えることができます。
PieChartRemoteController
このページのコントローラーは、「単純なグラフ作成の例」で使用されている円グラフコントローラーを拡張したものです。
1public class PieChartRemoteController {
2
3 // The year to be charted
4 public String chartYear {
5 get {
6 if (chartYear == Null) chartYear = '2013';
7 return chartYear;
8 }
9 set;
10 }
11
12 // Years available to be charted, for <apex:selectList>
13 public static List<SelectOption> getChartYearOptions() {
14 List<SelectOption> years = new List<SelectOption>();
15 years.add(new SelectOption('2013','2013'));
16 years.add(new SelectOption('2012','2012'));
17 years.add(new SelectOption('2011','2011'));
18 years.add(new SelectOption('2010','2010'));
19 return years;
20 }
21
22 public List<PieWedgeData> getPieData() {
23 // Visualforce expressions can't pass parameters, so get from property
24 return PieChartRemoteController.generatePieData(this.chartYear);
25 }
26
27 @RemoteAction
28 public static List<PieWedgeData> getRemotePieData(String year) {
29 // Remoting calls can send parameters with the call
30 return PieChartRemoteController.generatePieData(year);
31 }
32
33 // Private data "generator"
34 private static List<PieWedgeData> generatePieData(String year) {
35 List<PieWedgeData> data = new List<PieWedgeData>();
36 if(year.equals('2013')) {
37 // These numbers are absolute quantities, not percentages
38 // The chart component will calculate the percentages
39 data.add(new PieWedgeData('Jan', 30));
40 data.add(new PieWedgeData('Feb', 15));
41 data.add(new PieWedgeData('Mar', 10));
42 data.add(new PieWedgeData('Apr', 20));
43 data.add(new PieWedgeData('May', 20));
44 data.add(new PieWedgeData('Jun', 5));
45 }
46 else {
47 data.add(new PieWedgeData('Jan', 20));
48 data.add(new PieWedgeData('Feb', 35));
49 data.add(new PieWedgeData('Mar', 30));
50 data.add(new PieWedgeData('Apr', 40));
51 data.add(new PieWedgeData('May', 5));
52 data.add(new PieWedgeData('Jun', 10));
53 }
54 return data;
55 }
56
57 // Wrapper class
58 public class PieWedgeData {
59
60 public String name { get; set; }
61 public Integer data { get; set; }
62
63 public PieWedgeData(String name, Integer data) {
64 this.name = name;
65 this.data = data;
66 }
67 }
68}このコントローラーは、Visualforce グラフへのデータ提供に 2 つの異なる方法をサポートしています。
- Visualforce 式 {!pieData} を使用してインスタンスメソッド getPieData() をコールする。
- @RemoteAction 静的メソッド getRemotePieData() を JavaScript メソッドからコールして JavaScript Remoting を使用する。