Winter '12で、Visualforceページでグラフ表示ができる機能「Visualforce Charting」がリリースされました。
今までは、レポート・ダッシュボードのグラフをVisualforceで表示することができず、Visualforceでグラフを表示するには、Google Chartなどの他のサービスを利用しなければなりませんでした。
せっかくSalesforceにレポート・ダッシュボードのグラフ表示機能があるのに、他のサービスを使わないとVisualforceでグラフ表示ができないのは、とても残念だったのですが、Visualforce Chartingを使えば、Visualforceページでグラフ表示ができるようになります。
但し、まだPilotリリースのため、Developer Edition、Sandboxでのみ利用可能です。また、利用するにはセールスフォース・ドットコムのサポートへの連絡が必要です。
○サンプルコードと画面
Visualforce Chartingで、リードソース別のリード数を円グラフ、棒グラフ、折れ線グラフで表示した画面とソースコードを記載します。
（折れ線グラフは例としては適切ではないですが、ご容赦下さい。）
サンプル画面
Visualforceのサンプルコード
Apexのサンプルコード
public class ChartController {
// グラフに表示するデータセット用の内部クラス
public class ChartData {
public ChartData(
String name, Integer data){
this.name = name;
this.data = data;
}
public String name {get; set;}
public Integer data {get; set;}
}
// グラフに表示するデータセットのリスト
public List＜ChartData＞ dataList {get; set;}
public ChartController(){
dataList = new List＜ChartData＞();
for(AggregateResult r :
[Select count(Name) cnt, LeadSource
From Lead GROUP BY LeadSource]) {
dataList.add(
new ChartData(
(String)r.get('LeadSource'),
(Integer)r.get('cnt')));
}
}
}
○利用方法
Visualforce Chartingでグラフ表示するには、<apex:chart>タグを利用します。
まず、<apex:chart>タグのdata属性に、グラフ表示するデータセットを指定します。
データセットは、SObjectのリスト または Apexクラスのリストを指定します。
次に、<apex:chart>タグの子要素に、
・グラフ
・軸
・凡例
のタグを設定していきます。
以下では、グラフ、軸、凡例のタグの設定方法を説明します。
○グラフ
Visualforce Chartingで、現在サポートしているグラフの種類は、
・円グラフ
・棒グラフ
・折れ線グラフ
の3種類です。
棒グラフと折れ線グラフは重ねて表示することが可能です（<apex:chart>タグの子要素に、棒グラフと折れ線グラフのタグを指定します）。
・円グラフ
<apex:pieSeries>タグで設定します。
labelField：ラベルに対応するデータセットのフィールド名
dataField：データに対応するデータセットのフィールド名
ColorSet：表示色の種類（"#00F,#0F0,#F00"など）
・棒グラフ
<apex:barSeries>タグで設定します。
title：グラフタイトル
orientation：棒グラフの向き（horizontal：横、vertical：縦）
axis：対応させる軸の位置（left、right、top、bottom）
xField：x軸の値に対応するデータセットのフィールド名
yField：y軸の値に対応するデータセットのフィールド名
・折れ線グラフ
<apex:lineSeries>タグで設定します。
title：グラフタイトル
axis：対応させる軸の位置（left、right、top、bottom）
xField：x軸の値に対応するデータセットのフィールド名
yField：y軸の値に対応するデータセットのフィールド名
fill：折れ線の下部を塗りつぶす（true、false）
markerType：マーカーのタイプ（circle：○印、cross：×印）
markerSize：マーカーのサイズ（ピクセル単位）
markerFill：マーカーの色（#ff0000など）
○軸
<apex:axis>タグで設定します。
title：軸のタイトル
type：データ型（Numeric：数値、Category：カテゴリ）
position：軸の表示位置（left、right、top、bottom）
fields：軸に対応するデータセットのフィールド名
grid：グリッド線の表示（true、false）
gridFill：グリッド線の色
dashSize：目盛線の表示幅（ピクセル単位）
○凡例
<apex:legend>タグで設定します。
position：凡例の表示位置（left、right、top、bottom）
Visualforce Chartingのタグや属性の詳しい利用方法は、「Visualforce Developer Guide」を参照してください。