apex:chartでドーナツグラフを表示する方法です。
Apex
public with sharing class Chart_PieSeries2 {
public List<Data> getData() {
return Chart_PieSeries2.getChartData();
}
@RemoteAction
public static List<Data> getRemoteData() {
return Chart_PieSeries2.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', 17));
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_PieSeries2" title="Pie Chart">
<apex:chart data="{!data}" height="400" width="500">
<apex:legend position="left"/>
<apex:pieSeries labelField="name" dataField="data1" donut="50">
<apex:chartLabel display="middle" orientation="vertical" font="bold 18px Helvetica"/>
</apex:pieSeries>
</apex:chart>
</apex:page>
次の処理でドーナツグラフが表示できます。
<apex:pieSeries labelField="name" dataField="data1" donut="50">
円グラフを表示するための<apex:pieSeries>
ですが、
donut="50"
のように指定することで中心に穴を開けることができます。
次の処理ではグラフ内のラベル表示を設定しています。
<apex:chartLabel display="middle" orientation="vertical" font="bold 18px Helvetica"/>
display="middle"
でラベルの表示位置を指定できるようです。