tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:レーダーグラフの表示

<apex:chart>タグでレーダーグラフを表示する方法です。

f:id:tyoshikawa1106:20121124002118p:plain

 

Apexクラス・サンプル

public with sharing class Chart_RadarSeries {
    
    public List<Data> getData() {
        return Chart_RadarSeries.getChartData();
    }
    
    @RemoteAction
    public static List<Data> getRemoteData() {
        return Chart_RadarSeries.getChartData();
    }
    
    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 30));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;
    }
    
    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Integer data3 { get; set; }
        public Data(String name, Integer data1, Integer data2, Integer data3) {
            this.name = name;
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;
        }
    }
}

 

Visualforceページ・サンプル

<apex:page controller="Chart_RadarSeries">
    <apex:chart height="530" width="700" legend="true" data="{!data}">
        <apex:legend position="left"/>
        <apex:axis type="Radial" position="radial">
            <apex:chartLabel />
        </apex:axis>
        <apex:radarSeries xField="name" yField="data1" tips="true" opacity="0.4"/>
        <apex:radarSeries xField="name" yField="data2" tips="true" opacity="0.4"/>
        <apex:radarSeries xField="name" yField="data3" tips="true"  markerType="cross" strokeWidth="2" strokeColor="#f33" opacity="0.4"/>
     </apex:chart>
</apex:page>

 
<apex:radarSeries>でグラフ種別をレーダーに指定できます。

複数のグラフを表示したい場合はそれぞれ宣言する必要があるようです。