この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

単純なグラフ作成の例

Visualforce グラフでは、少なくとも 1 つのデータ系列コンポーネントを囲むグラフコンテナコンポーネントを作成する必要があります。必要に応じて、追加の系列コンポーネント、グラフの軸、および凡例、グラフのラベルおよびデータポイントのツールチップなどのラベルコンポーネントを追加できます。

次は単純な円グラフとこの円グラフを作成するマークアップです。

1swfobject.registerObject("clippy.pages_charting_simple_chart", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page controller="PieChartController" title="Pie Chart">
18    <apex:chart height="350" width="450" data="{!pieData}">
19        <apex:pieSeries dataField="data" labelField="name"/>
20        <apex:legend position="right"/>
21    </apex:chart>
22</apex:page>

<apex:chart> コンポーネントは、グラフコンテナを定義し、そのコンポーネントをデータソース、getPieData() コントローラメソッドにバインドします。<apex:pieSeries> は、返されるデータにアクセスしたり、各データポイントのラベル付けおよびサイズ設定をしたりするラベル項目およびデータ項目を記述します。

関連付けられているコントローラを次に示します。

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public class PieChartController {
18    public List<PieWedgeData> getPieData() {
19        List<PieWedgeData> data = new List<PieWedgeData>();
20        data.add(new PieWedgeData('Jan', 30));
21        data.add(new PieWedgeData('Feb', 15));
22        data.add(new PieWedgeData('Mar', 10));
23        data.add(new PieWedgeData('Apr', 20));
24        data.add(new PieWedgeData('May', 20));
25        data.add(new PieWedgeData('Jun', 5));
26        return data;
27    }
28
29    // Wrapper class
30    public class PieWedgeData {
31
32        public String name { get; set; }
33        public Integer data { get; set; }
34
35        public PieWedgeData(String name, Integer data) {
36            this.name = name;
37            this.data = data;
38        }
39    }
40}

このコントローラは、意図的に単純にしています。通常、データを収集するには 1 つ以上の SOQL クエリを発行します。

この例が示す重要なポイントを次に示します。

getPieData() メソッドは、ラッパーとして使用される内部クラス PieWedgeData という単純なオブジェクトのリストを返す。リストの各要素は、データポイントの作成に使用されます。
PieWedgeData クラスは単なるプロパティのセットであるが、基本的には、name=value ストアとして使用される。
グラフ系列コンポーネント <apex:pieSeries> では、系列内の各ポイントの決定に使用する PieWedgeData クラスのプロパティを定義する。この単純な例には不明確な部分はありませんが、複数の系列および軸を含むグラフでは、この規則により、1 つの List オブジェクトでデータセット全体を効率的に返すことができます。

Visualforce 開発者ガイド

単純なグラフ作成の例