Visualforce Chartingの利用方法

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」を参照してください。