« SOQLでのコレクションとバインド変数の使用方法 | メイン | メールの送受信の制限 »

2011年12月12日 (月)

Visualforce Chartingの利用方法

Winter '12で、Visualforceページでグラフ表示ができる機能Visualforce Charting」がリリースされました。

今までは、レポート・ダッシュボードのグラフをVisualforceで表示することができず、Visualforceでグラフを表示するには、Google Chartなどの他のサービスを利用しなければなりませんでした。

せっかくSalesforceにレポート・ダッシュボードのグラフ表示機能があるのに、他のサービスを使わないとVisualforceでグラフ表示ができないのは、とても残念だったのですが、Visualforce Chartingを使えば、Visualforceページでグラフ表示ができるようになります。

但し、まだPilotリリースのため、Developer Edition、Sandboxでのみ利用可能です。また、利用するにはセールスフォース・ドットコムのサポートへの連絡が必要です。

○サンプルコードと画面

Visualforce Chartingで、リードソース別のリード数を円グラフ、棒グラフ、折れ線グラフで表示した画面とソースコードを記載します。

(折れ線グラフは例としては適切ではないですが、ご容赦下さい。)

サンプル画面

20111212

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

コメント

コメントを投稿

コメントは記事の投稿者が承認するまで表示されません。

採用情報

株式会社フレクトでは、事業拡大のため、
・Salesforce/Force.comのアプリケーション開発
・HerokuやAWSなどのクラウドプラットフォーム上
でのWebアプリケーション開発
エンジニア、マネージャーを募集中です。

未経験でも、これからクラウドをやってみたい方、
是非ご応募下さい。

フレクト採用ページへ

会社紹介

  • 株式会社フレクトは、
      ・認定コンサルタント
      ・認定上級デベロッパー
      ・認定デベロッパー
    が在籍している、セールスフォースパートナーです。
    また、heroku partnersにも登録されています。
    herokuパートナー
    株式会社フレクト
    Salesforce/Force.com
    導入支援サービス
    弊社の認定プロフェッショナルが支援致します。
    ・Visualforce/Apexによるアプリ開発
    ・Salesforceと連携するWebアプリ開発
    も承っております。
    セールスフォースご検討の際は、
    お気軽にお問合せください。

Twitter

リファレンス

■Developer's Guide(リファレンス)
・Apex  HTML | PDF | 日本語PDF | ガバナ制限
・Visualforce  HTML | PDF
・Web Services API  HTML | PDF | 日本語PDF
・Bulk API  HTML | PDF
・REST API  HTML | PDF | 日本語PDF
・Metadata API  HTML | PDF
・Migration Tool  HTML | PDF
・AJAX Toolkit  HTML | PDF
・Data Loader PDF | 日本語PDF

■早見表 (日本語)
数式
Apex
Visualforce
Web Services API
Chatter