Winter '12で、Visualforceページでグラフ表示ができる機能「Visualforce Charting」がリリースされました。
今までは、レポート・ダッシュボードのグラフをVisualforceで表示することができず、Visualforceでグラフを表示するには、Google Chartなどの他のサービスを利用しなければなりませんでした。
せっかくSalesforceにレポート・ダッシュボードのグラフ表示機能があるのに、他のサービスを使わないとVisualforceでグラフ表示ができないのは、とても残念だったのですが、Visualforce Chartingを使えば、Visualforceページでグラフ表示ができるようになります。
但し、まだPilotリリースのため、Developer Edition、Sandboxでのみ利用可能です。また、利用するにはセールスフォース・ドットコムのサポートへの連絡が必要です。
○サンプルコードと画面
Visualforce Chartingで、リードソース別のリード数を円グラフ、棒グラフ、折れ線グラフで表示した画面とソースコードを記載します。
（折れ線グラフは例としては適切ではないですが、ご容赦下さい。）
サンプル画面
Visualforceのサンプルコード
01 | <apex:page controller="ChartController"> |
03 | <apex:chart data="{!dataList}" width="300" height="300"> |
04 | <apex:pieseries labelfield="name" datafield="data"> |
06 | <apex:legend position="right"></apex:legend> |
10 | <apex:chart data="{!dataList}" width="300" height="300"> |
11 | <apex:barseries title="リードソース別リード数" orientation="vertical" axis="left" xfield="name" yfield="data"> |
14 | <apex:axis type="Category" position="bottom" fields="name" title="リードソース"> |
15 | <apex:chartlabel rotate="270"></apex:chartlabel> |
17 | <apex:axis type="Numeric" position="left" fields="data" title="リード数" dashsize="5" minimum="0" maximum="3"> |
22 | <apex:chart data="{!dataList}" width="300" height="300"> |
23 | <apex:lineseries title="リードソース別リード数" axis="left" fill="true" xfield="name" yfield="data" markertype="cross" markersize="4" markerfill="#FF0000"> |
25 | <apex:axis type="Category" position="bottom" fields="name" title="リードソース"> |
26 | <apex:chartlabel rotate="270"></apex:chartlabel> |
28 | <apex:axis type="Numeric" position="left" fields="data" title="リード数" dashsize="5" minimum="0" maximum="3"> |
Apexのサンプルコード
01 | public class ChartController { |
03 | public class ChartData { |
05 | String name, Integer data){ |
10 | public String name {get; set;} |
11 | public Integer data {get; set;} |
15 | public List＜ChartData＞ dataList {get; set;} |
17 | public ChartController(){ |
18 | dataList = new List＜ChartData＞(); |
19 | for(AggregateResult r : |
20 | [Select count(Name) cnt, LeadSource |
21 | From Lead GROUP BY LeadSource]) { |
25 | (String)r.get('LeadSource'), |
26 | (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」を参照してください。
の
最近のコメント