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' ?>
<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);
}
}
これで表示してみると
超質素(^^;属性の指定がないからですね。
以下、色々とある属性を指定してみます。
- 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"/>
こんな感じ。
画面右に配置するには「e」です。East(東)。
<p:pieChart value="#{pieChartBean.model}" style="width:400px;"
legendPosition="e"/>
「n」でNorth(北)にすると以下のようになり、「s」でSouth(南)にすると下図の上下が反転したものとなります。
legendRow
先の例にあった例にlegendRow属性を指定してみます。例えば2とすると、2行だけ表示してね、となります。
<p:pieChart value="#{pieChartBean.model}" style="width:400px;"
legendPosition="w"
legendRows="2"/>
指定前
指定後
説明文が2段になってます。
sliceMargin
sliceMarginに5を指定してみます。
<p:pieChart value="#{pieChartBean.model}" style="width:400px;"
legendPosition="w"
sliceMargin="5"/>
指定前
指定後
円の切れ目に距離が出ます。
fill
fillをfalseにして色塗りをなくしてみます。
<p:pieChart value="#{pieChartBean.model}" style="width:400px;"
legendPosition="w"
fill="false"/>
指定前
指定後
枠のみ、少しみにくいのでsliceMarginあったほうが良さげですね(^^;
shadow
影をなくしてみます。
<p:pieChart value="#{pieChartBean.model}" style="width:400px;"
legendPosition="w"
shadow="false"/>
指定前
指定後
ちょっとわかりにくいですが、円の右下に影があったのがなくなっています。
sliceMarginを設定した場合にも切れ目の間に影がみえるのですが、これもなくなります。
showDataLabels
trueにすると円の上にラベルが表示されます。
<p:pieChart value="#{pieChartBean.model}" style="width:400px;"
legendPosition="w"
showDataLabels="true"/>
指定前
指定後
他にもありそうですが、とりあえずこんな感じ(^^;
コンポ置いて、属性指定するだけなので結構手軽です。
