Visualforce 開発者ガイド
j単純なグラフ作成の例
Visualforce グラフでは、少なくとも 1 つのデータ系列コンポーネントを囲むグラフコンテナコンポーネントを作成する必要があります。必要に応じて、追加の系列コンポーネント、グラフの軸、および凡例、グラフのラベルおよびデータポイントのツールチップなどのラベルコンポーネントを追加できます。
次は単純な円グラフとこの円グラフを作成するマークアップです。
1<apex:page controller="PieChartController" title="Pie Chart">
2 <apex:chart height="350" width="450" data="{!pieData}">
3 <apex:pieSeries dataField="data" labelField="name"/>
4 <apex:legend position="right"/>
5 </apex:chart>
6</apex:page><apex:chart> コンポーネントは、グラフコンテナを定義し、そのコンポーネントをデータソース、getPieData() コントローラーメソッドにバインドします。<apex:pieSeries> は、返されるデータにアクセスしたり、各データポイントのラベル付けおよびサイズ設定をしたりするラベル項目およびデータ項目を記述します。
関連付けられているコントローラーを次に示します。
1public class PieChartController {
2 public List<PieWedgeData> getPieData() {
3 List<PieWedgeData> data = new List<PieWedgeData>();
4 data.add(new PieWedgeData('Jan', 30));
5 data.add(new PieWedgeData('Feb', 15));
6 data.add(new PieWedgeData('Mar', 10));
7 data.add(new PieWedgeData('Apr', 20));
8 data.add(new PieWedgeData('May', 20));
9 data.add(new PieWedgeData('Jun', 5));
10 return data;
11 }
12
13 // Wrapper class
14 public class PieWedgeData {
15
16 public String name { get; set; }
17 public Integer data { get; set; }
18
19 public PieWedgeData(String name, Integer data) {
20 this.name = name;
21 this.data = data;
22 }
23 }
24}この例が示す重要なポイントを次に示します。
- getPieData() メソッドは、ラッパーとして使用される内部クラス PieWedgeData という単純なオブジェクトのリストを返す。リストの各要素は、データポイントの作成に使用されます。
- PieWedgeData クラスは単なるプロパティのセットであるが、基本的には、name=value ストアとして使用される。
- グラフ系列コンポーネント <apex:pieSeries> では、系列内の各ポイントの決定に使用する PieWedgeData クラスのプロパティを定義する。この単純な例には不明確な部分はありませんが、複数の系列および軸を含むグラフでは、この規則により、1 つの List オブジェクトでデータセット全体を効率的に返すことができます。