2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visualforceで散布図を表示

Last updated at Posted at 2012-12-26

Winter'13でグラフを表示するためのapex:chartが正式にリリースされました。

これを使用して散布図を表示することができます。

Apex
public with sharing class Chart_ScatterSeries {

    public List<Data> getData() {
        return Chart_ScatterSeries.getChartData();
    }

    @RemoteAction
    public static List<Data> getRemoteData() {
        return Chart_ScatterSeries.getChartData();
    }

    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90));
        data.add(new Data('Feb', 44, 15));
        data.add(new Data('Mar', 25, 32));
        data.add(new Data('Apr', 74, 28));
        data.add(new Data('May', 65, 51));
        data.add(new Data('Jun', 33, 45));
        data.add(new Data('Jul', 92, 82));
        data.add(new Data('Aug', 87, 73));
        data.add(new Data('Sep', 34, 65));
        data.add(new Data('Oct', 78, 66));
        data.add(new Data('Nov', 80, 67));
        data.add(new Data('Dec', 17, 70));
        return data;
    }

    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Data(String name, Integer data1, Integer data2) {
            this.name = name;
            this.data1 = data1;
            this.data2 = data2;
        }
    }
}
Visualforce
<apex:page controller="Chart_ScatterSeries">
    <apex:chart height="530" width="700" animate="true" data="{!data}">
        <apex:scatterSeries xField="data1" yField="data2"  markerType="circle" markerSize="3"/>
        <apex:axis type="Numeric" position="bottom" fields="data1"  title="Torque" grid="true">
            <apex:chartLabel />
        </apex:axis>
        <apex:axis type="Numeric" position="left" fields="data2"  title="Lateral Motion" grid="true">
            <apex:chartLabel />
        </apex:axis>
    </apex:chart>
</apex:page>
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?