攻略! ツール・ド・プログラミング(51) JSFコンポーネントライブラリ「OpenFaces」でグラフを表示する

今回は、前回紹介したOpenFacesを用いて、Webページにグラフを表示する方法を解説する。OpenFacesではグラフを表示するためのカスタムタグとしてタグが用意されている。このタグを用いることで、サーバ側のBacking Beanのプロパティとグラフの値を関連付けて表示することができる。

chartタグのもっとも基本的な使い方は次のようになる。

<o:chart model="[BackingBeanのプロパティ]" view="[グラフの種類]">

model属性には表示したいデータの情報を保持するBacking Beanのプロパティを指定し、view属性にはグラフの種類を指定する。グラフの種類としては"pie"(円グラフ)、"line"(折れ線グラフ)、"bar"(棒グラフ)がサポートされている。本稿では、まずBacking Beanの例として以下に示すPowerPlantBeanクラスを用意した。

@ManagedBean
@RequestScoped
public class PowerPlantBean {
    private PlainModel powerGeneration = new PlainModel();  // 発電電力量
    private String title = "2009年度の電源別発電電力量";           // タイトル


    /* コンストラクタ */
    public PowerPlantBean() {
        initPowerData();  // モデルの初期化
    }


    /* モデルの初期化 */
    private void initPowerData() {
        Map<String, Integer> data = new LinkedHashMap<String, Integer>();
        data.put("原子力", 2774);
        data.put("石油等", 670);
        data.put("石炭", 2391);
        data.put("天然ガス", 1913);
        data.put("水力", 765);
        data.put("新エネルギー", 96);

        PlainSeries series = new PlainSeries();
        series.setData(data);
        series.setKey("2009年度の電源別発電電力量");

        this.powerGeneration.addSeries(series);
    }

    public ChartModel getPowerGeneration() {
        return this.powerGeneration;
    }

    public String getTitle() {
        return this.title;
    }
}

これは電源別の発電電力量を表すBeanを想定しており、発電電力量のデータを保持するpowerGenerationと、グラフのタイトルとなるtitleという2つのプロパティを持っている。chartタグを使用する場合、グラフで表示したい元となるデータはorg.openfaces.component.chart.ChartModelオブジェクトとしてBackingBeanに保持すればよい。PowerPlantBeanクラスで使用しているPlainModelは、そのChartModelの実装クラスである。

PlainModelオブジェクトを作成するには、まずデータセットを表すorg.openfaces.component.chart.Seriesオブジェクトを用意する。Seriesの実装クラスであるPlainSeriesは、データセットをキーとMapオブジェクトの組み合わせとして保持するように定義されている。そこでPowerPlantBeanでは、電源の種類をキー、発電電力量を値とするLinkedHashMapオブジェクトを作成し、それを元にPlainSeriesを生成している。そして最終的にこれをPlainModelに対してaddSeries()メソッドを使って追加している。複数のデータセットを扱いたい場合には、同様にしてSeriesを追加していけばよい。

これをBacking Beanとして使えるようにするためのfaces-config.xmlの記述例は次のようになる。

<?xml version='1.0' encoding='UTF-8'?>


<faces-config version="2.0"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                        http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">


    <managed-bean>
        <managed-bean-name>PowerPlantBean</managed-bean-name>
        <managed-bean-class>jp.co.mycom.toolde.PowerPlantBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>


</faces-config>

なお、NetBeansでJSFのBacking Bean(Managed Bean)を作成する場合には、新規ファイル作成でファイルの種類として[JavaSever Faces]-[JSF 管理対象 Bean]を選択してManagedBeanクラスを作成すればよい(、)。


NetBeansによるJSFのBacking Bean(Managed Bean)の作成	「構成ファイルにデータを追加」の設定をしておけば、設定ファイルも自動で編集される

続いて、このデータをグラフとして表示するWebページのソースを以下に示す。

<?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:o="http://openfaces.org/">
  <h:head>
      <title>OpenFacesのサンプル</title>
  </h:head>

  <h:body>
    <h1>円グラフ</h1>


    <o:chart model="#{PowerPlantBean.powerGeneration}" view="pie">
      <o:chartTitle text="#{PowerPlantBean.title}"
                    style="font-family: sans-serif; font-size: 15px; color: black;" />
      <o:chartLegend style="font-family: sans-serif; font-size: 12px; color: black;" />
      <o:pieChartView labelsVisible="true" />
    </o:chart>

  </h:body>
</html>

まずchartタグだが、model属性の値にはPowerPlantBeanのpowerGenerationプロパティを設定すればよい。、ここでは円グラフを表示するようにview属性の値を"pie"にした。chartには様々な子要素を指定することで表示をカスタマイズすることができる。はグラフのタイトルを表示するためのタグで、text属性にタイトルとなる文字列を指定する。今回はPowerPlantBeanのtitleプロパティの値を割り当てた。は凡例の表示設定を行うためのタグである。chartTitleやchartLegendはデフォルトのままだと日本語が文字化けしてしまうため、style属性で日本語フォントを指定する必要がある。

はグラフのデータ描画に関する様々な設定を行うためのタグである。この例では、labelsVisible属性に"true"を設定しているが、こうすることで円グラフの各データに対してラベルが表示されるようになる。

以上で一応完成なのだが、JSF 2.0を使った場合このままだとなぜかページの下部にのようなエラーが表示されてしまう。この問題は、web.xmlにおいてjavax.faces.PROJECT_STAGEのパラメータの値を「Development」ではなく「Production」に変更することでとりあえず回避できる。

なぜかエラーが。web.xmlのPROJECT_STAGEを「Production」にすれば消える

<context-param>
  <param-name>javax.faces.PROJECT_STAGE</param-name>
  <param-value>Production</param-value>
</context-param>

作成した一連のファイルをパッケージングし、WebアプリケーションサーバにデプロイしてWebブラウザからアクセスすれば、のような円グラフが表示されるはずだ。

円グラフの表示例

ところで、chartコンポーネントではデータモデルのSeriesオブジェクトの値にアクセスするためにpointとsectorという2種類の特別な変数が用意されている。pointは棒グラフや折れ線グラフで利用可能な変数で、sectorは円グラフので利用できる変数である。それぞれ、keyやvalueといったプロパティを持っており、データセットであるSeriesオブジェクトのkey/valueなどの値に関連付けられている。以下はpieChartViewでsectorを使用してみた例である。

<o:pieChartView labelsVisible="true" tooltip="#{sector.key} - #{sector.value}億kWh" />

pieChartViewのtooltip属性を指定すると、グラフ上にマウスカーソルが置かれた際に指定された文字がポップアップ表示されるようになる。この例はsector.keyとsector.valueプロパティを使っているが、これはそれぞれモデルオブジェクトであるPlainModelが持つSeriesのkeyとvalueに関連付けられている。このように指定した場合、ポップアップ表示はのようになる。

sector変数を利用したツールチップの表示

OpenFacesで棒グラフを作成する

同様にして棒グラフも作ってみよう。棒グラフの場合には、次のようにchartのview属性の値を"bar"にすればよい。

<?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:o="http://openfaces.org/">
  <h:head>
    <title>OpenFacesのサンプル</title>
  </h:head>

  <h:body>
    <h1>棒グラフ</h1>


    <o:chart model="#{PowerPlantBean.powerGeneration}" view="bar" width="500">
      <o:chartTitle text="#{PowerPlantBean.title}"
                  style="font-family: sans-serif; font-size: 15px; color: black;" />
      <o:chartLegend style="font-family: sans-serif; font-size: 12px; color: black;" />
      <o:chartAxis style="font-family: sans-serif; font-size: 12px; color: black;" />


      <o:barChartView labelsVisible="true" tooltip="#{point.key} - #{point.value}億kWh"
                      style="font-family: sans-serif; font-size: 11px; color: black;" />
    </o:chart>


  </h:body>
</html>

円グラフとの違いは、pieChatViewではなくタグを使うことである。また、タグを使うことで軸線に関する設定を行うことができる。Webブラウザでの表示はのようになる。