読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

PrimeFacesのChartsコンポーネントを触ってみる - Pie Chart -

PrimeFaces JSF Charts 堀北真希

PrimeFacesにはグラフや図を表現するChartsコンポーネントがあります。

以下はChartsの種類とShowcaseへのリンクです。

内部的にはjqPlotというjQueryのpluginを使っているとのことです。
http://www.jqplot.com/

Chartsコンポは今まで一度も触ったことないのですが、将来的には分析系の画面とかも作る必要がある…と思うので少しずつ触っていこうかなと思います。

とりあえずPrimeFacesは4.0を使ってみます!

まずはPie Chart。

ビューの定義は非常に簡単でJSFでpieChartコンポを置くだけです。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Pie Chart</title>
    </h:head>
    <h:body>
        <p:pieChart value="#{pieChartBean.model}" style="width:400px;" />
    </h:body>
</html>

valueでバインドしているデータは以下のような管理対象Beanのデータです。

package jp.co.kke.primefaces4;

import javax.annotation.PostConstruct;
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
import lombok.Getter;
import org.primefaces.model.chart.PieChartModel;

@Named(value = "pieChartBean")
@RequestScoped
public class PieChartBean {
    
    @Getter
    private PieChartModel model;

    @PostConstruct
    public void init(){
        model = new PieChartModel();
        model.set("堀北真希", 60);
        model.set("能年玲奈", 20);
        model.set("橋本愛", 15);
        model.set("有村架純", 5);
    }
}

これで表示してみると

f:id:kikutaro777:20131029220437j:plain

超質素(^^;属性の指定がないからですね。

以下、色々とある属性を指定してみます。

  • legendPosition … 説明文(legend)の位置。東西南北(e,w,s,n)で指定。
  • legendRows … 説明文の行数
  • sliceMargin … 円を区切るラインの余白(マージン)
  • fill … 色の塗りつぶし(デフォルトtrue)
  • shadow … 影(デフォルトtrue)
  • showDataLabels … データのラベル表示(デフォルトfalse)
legendPosition

画面左に配置するには「w」を指定します。West(西)の頭ですね。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="w"/>

こんな感じ。
f:id:kikutaro777:20131029222931j:plain

画面右に配置するには「e」です。East(東)。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="e"/>

f:id:kikutaro777:20131029223042j:plain

「n」でNorth(北)にすると以下のようになり、「s」でSouth(南)にすると下図の上下が反転したものとなります。

f:id:kikutaro777:20131029223105j:plain

legendRow

先の例にあった例にlegendRow属性を指定してみます。例えば2とすると、2行だけ表示してね、となります。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="w"
                    legendRows="2"/>

指定前
f:id:kikutaro777:20131029222931j:plain

指定後
f:id:kikutaro777:20131029223353j:plain

説明文が2段になってます。

sliceMargin

sliceMarginに5を指定してみます。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="w"
                    sliceMargin="5"/>

指定前
f:id:kikutaro777:20131029222931j:plain

指定後
f:id:kikutaro777:20131029223609j:plain

円の切れ目に距離が出ます。

fill

fillをfalseにして色塗りをなくしてみます。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="w"
                    fill="false"/>

指定前
f:id:kikutaro777:20131029222931j:plain

指定後
f:id:kikutaro777:20131029223740j:plain

枠のみ、少しみにくいのでsliceMarginあったほうが良さげですね(^^;

shadow

影をなくしてみます。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="w"
                    shadow="false"/>

指定前
f:id:kikutaro777:20131029222931j:plain

指定後
f:id:kikutaro777:20131029224043j:plain

ちょっとわかりにくいですが、円の右下に影があったのがなくなっています。
sliceMarginを設定した場合にも切れ目の間に影がみえるのですが、これもなくなります。

showDataLabels

trueにすると円の上にラベルが表示されます。

<p:pieChart value="#{pieChartBean.model}" style="width:400px;" 
                    legendPosition="w"
                    showDataLabels="true"/>

指定前
f:id:kikutaro777:20131029222931j:plain

指定後
f:id:kikutaro777:20131029224313j:plain

他にもありそうですが、とりあえずこんな感じ(^^;
コンポ置いて、属性指定するだけなので結構手軽です。

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村