Visualforce 開発者ガイド
jコントローラメソッドを使用したグラフデータの提供
グラフにデータを提供する最も簡単な方法は、コントローラメソッドを参照する Visualforce 式を使用することです。<apex:chart> data 属性でコントローラを参照するだけですみます。
サーバ側では、「単純なグラフ作成の例」にあるような独自の Apex ラッパーオブジェクト、sObject、または AggregateResult オブジェクトにすることができるオブジェクトのリストを返すコントローラメソッドを記述します。このメソッドは、サーバ側で評価され、結果が JSON に逐次化されます。クライアントでは、<apex:chart> がこれらの結果を直接使用するため、結果をさらに処理することはできません。
以下は、sObject を使用してこの技法を説明するための Opportunities (商談) のリストおよびその金額の棒グラフを返す単純なコントローラです。
1public class OppsController {
2
3 // Get a set of Opportunities
4 public ApexPages.StandardSetController setCon {
5 get {
6 if(setCon == null) {
7 setCon = new ApexPages.StandardSetController(Database.getQueryLocator(
8 [SELECT name, type, amount, closedate FROM Opportunity]));
9 setCon.setPageSize(5);
10 }
11 return setCon;
12 }
13 set;
14 }
15
16 public List<Opportunity> getOpportunities() {
17 return (List<Opportunity>) setCon.getRecords();
18 }
19}1<apex:page controller="OppsController">
2 <apex:chart data="{!Opportunities}" width="600" height="400">
3 <apex:axis type="Category" position="left" fields="Name" title="Opportunities"/>
4 <apex:axis type="Numeric" position="bottom" fields="Amount" title="Amount"/>
5 <apex:barSeries orientation="horizontal" axis="bottom"
6 xField="Name" yField="Amount"/>
7 </apex:chart>
8 <apex:dataTable value="{!Opportunities}" var="opp">
9 <apex:column headerValue="Opportunity" value="{!opp.name}"/>
10 <apex:column headerValue="Amount" value="{!opp.amount}"/>
11 </apex:dataTable>
12</apex:page>
この例に関する 2 つの重要な注意事項を次に示します。
- Visualforce グラフコンポーネントは、「単純なグラフ作成の例」で使用される単純なデータオブジェクトと同じ方法で、Opportunity sObject のリストのデータ属性にアクセスする。
- データ属性として使用されるオブジェクト項目名では JavaScript では大文字と小文字が区別されるが、Apex および Visualforce の項目名では区別されない。軸およびデータ系列コンポーネントの fields 属性、xField 属性、および yField 属性の正確な項目名を使用するように注意してください。正確な項目を使用しない場合は、グラフが作成されず、エラーメッセージも表示されません。