<apex:chart>タグでゲージグラフを表示する方法です。
Apexクラス・サンプル
public with sharing class Chart_GaugeSeries { public List<Data> getData() { return Chart_GaugeSeries.getChartData(); } @RemoteAction public static List<Data> getRemoteData() { return Chart_GaugeSeries.getChartData(); } public static List<Data> getChartData() { List<Data> data = new List<Data>(); data.add(new Data('Jan', 30)); data.add(new Data('Feb', 44)); data.add(new Data('Mar', 25)); data.add(new Data('Apr', 74)); data.add(new Data('May', 65)); data.add(new Data('Jun', 33)); data.add(new Data('Jul', 92)); data.add(new Data('Aug', 87)); data.add(new Data('Sep', 34)); data.add(new Data('Oct', 78)); data.add(new Data('Nov', 80)); data.add(new Data('Dec', 170)); return data; } public class Data { public String name { get; set; } public Integer data1 { get; set; } public Data(String name, Integer data1) { this.name = name; this.data1 = data1; } } }
Visualforceページ・サンプル
<apex:page controller="Chart_GaugeSeries"> <apex:chart height="250" width="450" animate="true" data="{!data}"> <apex:axis type="Gauge" position="gauge" title="Transaction Load" minimum="0" maximum="100" steps="10"/> <apex:gaugeSeries dataField="data1" donut="50" colorSet="#78c953,#ddd"/> </apex:chart> </apex:page>
<apex:gaugeSeries>でグラフ種別をゲージに指定しています。
ゲージグラフも"donut"を指定できます。
これによりグラフ中心の空白を変更できます。
例)「donut="0"」 の場合