tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:ドーナツグラフの表示

<apex:chart>タグでドーナツグラフを表示する方法です。

f:id:tyoshikawa1106:20121125114428p:plain

 

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>でグラフ種別を円グラフに指定しています。 

<apex:pieSeries>内の「donut="50"」でドーナツ形式に表示できます。

 

<apex:chartLabel>でグラフ内にラベルを表示できます。

display="middle"はラベルの表示位置を指定できます。

 

orientationはよくわかりませんでした...。

わかったら追記する予定です。