カテゴリー「Java-グラフ」の4件の記事

2011年3月 2日 (水)

JFreeChartを使用したサンプルプログラム3 (見た目の変更)

今回は、JFreeChart で作成したグラフの見た目を、いろいろと触ってみる。

JFreeChartのグラフは各オブジェクトを変更することで
色、メモリ幅等見た目を変更することができる。

↓各オブジェクト名

Test_3 

■目盛りX軸を整数だけにする(XYBarChart)

        JFreeChart objCht = ChartFactory.createXYBarChart(・・・省略・・・);

        final XYPlot plot = objCht.getXYPlot();
        final NumberAxis rangeAxis = (NumberAxis) plot.getDomainAxis();
        rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

Test_5 

結果、X軸が整数のみの表示になる。

  getDomainAxis:横軸の取得

■目盛りY軸を整数だけにする(XYBarChart)

        JFreeChart objCht = ChartFactory.createXYBarChart(・・・省略・・・);

        final XYPlot plot = objCht.getXYPlot();
        final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();
        rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

Test_7

結果、Y軸が整数のみの表示になる。

※例のように、Y軸が1より少ない場合、メモリの表示自体が消えてしまう
  Y軸の値が1より大きくなれば、メモリも表示される

  getRangeAxis:縦軸の取得

■棒グラフの影をなくす(XYBarChart)

        JFreeChart objCht = ChartFactory.createXYBarChart(・・・省略・・・);

        final XYPlot plot = objCht.getXYPlot();

        //棒グラフの影をなくす
        XYBarRenderer barRenderer = ((XYBarRenderer) plot.getRenderer());
        barRenderer.setShadowVisible(false);

Test

結果、棒グラフの影が消える。

  getRenderer:描画方法の取得

■横軸の両端(開始/終了)の指定 (XYAreaChart)

        JFreeChart objCht = ChartFactory.createXYAreaChart(・・・省略・・・);

        // 横軸の最小値と最大値を設定
        XYPlot plot = objCht.getXYPlot();
        NumberAxis numberAxis = (NumberAxis) plot.getDomainAxis();
        numberAxis.setLowerBound(1);
        numberAxis.setUpperBound(11);

Photo


  結果、グラフの開始が「1」、終了が「11」となる。
 

 ※ 横軸の最小値と最大値を設定することで両端の隙間が無くなる

 ※ getDomainAxis() ではなく getRangeAxis() を指定すると縦軸の指定になります

 

上記他にも触れる箇所は多く、色々試してみるのも楽しいと思います。
ただ、日本語の参考サイトが少なく、どのオブジェクトをどのように触れば
良いのか分かりにくいとは思います。

2011年3月 1日 (火)

JFreeChartを使用したサンプルプログラム2 (機能追加)

前回は簡単なサンプルを作成したが、今回は少し機能を追加してみる

① 画像の自動更新
② JSPからグラフの種類変更
③ JSPからグラフのタイトル等を変更

まずJSPの先頭でタイトル等を設定する

<%-- グラフのタイトル等を設定する--%>
<c:url var="imgtitle" value="棒グラフ" />
<c:url var="xLabel" value="XXXX" />
<c:url var="yLabel" value="YYYY" />

同じく、JSPの先頭でグラフの種類を設定する

<%-- 表示できるグラフの種類をあらかじめ設定する--%>
<c:set var="BAR3D" value="<%= FixedValues.TYPE.BAR3D %>" />
<c:set var="PIE3D" value="<%= FixedValues.TYPE.PIE3D %>" />
<c:set var="SPIDER" value="<%= FixedValues.TYPE.SPIDER %>" />

<%-- 表示グラフを設定する※上の3種類より選択--%>
<c:set var="imgtype" value="${PIE3D}" />

同じく、JSP中で画像を表示させたい場所に、IMGタグを2つ用意
(この時点ではSRC未設定)

    <img id="view1" name="view1" src="">
    <img id="view2" name="view2" src="">

同じく、JSPの最後の方にJavaScriptを追加し、
画像の設定と読込を行う

<script type="text/javascript">
<!--
// IMG 再描画時間(10秒)
var second = 10000 ;

// 画像選択フラグ
var chgFlg = true ;

// 画像引数
var no = 0 ;

// 使用する文字列を設定
var IMGTITLE = '${imgtitle}';
var XLABEL = '${xLabel}';
var YLABEL = '${yLabel}';

var IMGSRC = "/Viewer?imgtype=" + '${imgtype}'
        + "&imgtitle=" + IMGTITLE
        + "&xLabel=" + XLABEL
        + "&yLabel=" + YLABEL
        + "&no=" ;

// 画像再描画関数
chgImg();

/**
  * 画像再描画
  */
function chgImg(){

  if(no == 0){
      document.getElementById("view2").style.display = "none";
      document.getElementById("view1").src = IMGSRC + no ;
  }else if( chgFlg ){
      document.getElementById("view2").style.display = "none";
      document.getElementById("view1").style.display = "";
      document.getElementById("view2").src = IMGSRC + no ;
      chgFlg = !chgFlg;
  }else{
      document.getElementById("view1").style.display = "none";
      document.getElementById("view2").style.display = "";
      document.getElementById("view1").src = IMGSRC + no ;
      chgFlg = !chgFlg;
  }
  no = no + 1 ;
 setTimeout("chgImg()", second);
}
//-->
</script>

初回にview1のIMGタグを設定し、その後、
setTimeout() を用いて10秒毎に関数を呼び
view2 と view1 の表示・非表示を繰り返すようにする。

グラフの種類やタイトル等はGetパラメータでサーブレットに渡す。

また、no を後ろに追加することで、イメージのキャッシュを呼び出さないようにする

最後にサーブレット側でグラフの種類、タイトル等を受け取り、その値を設定する
(ソースが長くなるので一部のみ抜粋)

サーブレット(Viewer)

        :
      (省略)
        :

            // グラフの種類取得
            String imgType = (String) request.getParameter("imgtype");

            if (imgType == null) {

                // imgTypeが取得できない場合は3D棒グラフの作成
                viewCreateBarChart3D(request);

            } else if (imgType.equals(FixedValues.TYPE.BAR3D.toString())) {

                // 3D棒グラフの作成
                viewCreateBarChart3D(request);

            } else if (imgType.equals(FixedValues.TYPE.PIE3D.toString())) {

                // 3D円グラフの作成
                viewCreatePieChart3D(request);

            } else if (imgType.equals(FixedValues.TYPE.SPIDER.toString())) {

                // レーダチャートの作成
                viewCreateSpiderWebPlot(request);

            } else {

                // その他存在しない値は3D棒グラフの作成
                viewCreateBarChart3D();
            }

        :
      (省略)
        :

    /**.
     * 3次元棒グラフを生成
     * @param request リクエスト
     * @throws IOException IO例外
     */
    public final void viewCreateBarChart3D(
            final HttpServletRequest request
  ) throws IOException {

        //レガシーテーマを設定する
        ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());

        // 棒グラフの基となるデータセット(list)を用意する
        :
      (省略)
        :

        // Getパラメータからタイトル取得
        String title = (String) request.getParameter("imgtitle");

        // GetパラメータからX軸取得
        String xLabel = (String) request.getParameter("xLabel");

        // GetパラメータからY軸取得
        String yLabel = (String) request.getParameter("yLabel");

        // 3次元棒グラフを生成
        //  第1引数 グラフタイトル、
        //  第2引数 横軸
        //  第3引数 縦軸
        //  第4引数 データ
        //  第5引数 VERTICAL:縦棒グラフ 、HORIZONTAL:横棒グラフ
        //  第6引数 判例を表示するか
        //  第7引数 ツールチップを表示するか
        //  第8引数 URLを動的に生成するか
        JFreeChart objCht = ChartFactory.createBarChart3D(
                title,
                xLabel,
                yLabel,
                list,
                PlotOrientation.VERTICAL ,
                true, false, false);

        // JPEG形式で画像を出力(390×260ピクセル)
        response.setContentType("image/jpeg");
        ServletOutputStream objSos = null;
        objSos = response.getOutputStream();
        ChartUtilities.writeChartAsJPEG(objSos, objCht,
                    390,
                    260);
        return;
    }

※注意

 Getパラメータに日本語を渡す場合、Tomcat の server.xml  に
 「useBodyEncodingForURI="true"」の記述を追加する必要がある

    <Connector connectionTimeout="60000" port="8080"
         protocol="org.apache.coyote.http11.Http11NioProtocol"
         redirectPort="8443"
         useBodyEncodingForURI="true"  />

以上の対応を行う利点は、

・最新の画像が10秒間隔で読み込める
・リコンパイルをせずにJSPの変更のみで画像の変更が行える

まだ試してはいないが、Comet という技術を使えば、
画像の更新時のみ再読み込みを行うようにすることもできると思われる。

下図は上記プログラムを元に作成したグラフです。
赤色の「imgtitle」、「xLabelyLabel」以外は JFreeChart のオブジェクトになります。

Test

2011年1月19日 (水)

JFreeChartを使用したサンプルプログラム

JFreeChartを使用したサンプルプログラム

① JSPファイルでIMGタグ追加

       <img src="/xxx/SimpleViewer">

※サーブレット「SimpleViewer」を呼び出す為、Web.xmlも変更する

    <servlet>
      <description></description>
      <display-name>SimpleViewer</display-name>
      <servlet-name>SimpleViewer</servlet-name>
      <servlet-class>xxx.SimpleViewer</servlet-class>
    </servlet>
    <servlet-mapping>
      <servlet-name>SimpleViewer</servlet-name>
      <url-pattern>/SimpleViewer</url-pattern>
    </servlet-mapping>

② Javaプログラム作成

    /**
     * Get処理
     */
    protected void doGet(
      HttpServletRequest request,
      HttpServletResponse response)
    throws ServletException, IOException {
       View(request,response);
    }

/**
  * 出力共通処理
  * @param request リクエスト
  * @param response レスポンス
  * @throws ServletException
  * @throws IOException
  */
public void View(
   HttpServletRequest request,
   HttpServletResponse response)
throws ServletException, IOException {

  // セッション取得
  HttpSession session = request.getSession();

  // データの取得(事前に配列型データをセッションに設定しておく)
  Object objectList = session.getAttribute("sesXxxxBean") ;

  // データの設定(前もってGetter/Setterを持ったBeanを作成)
  @SuppressWarnings("unchecked")
  ArrayList<XxxxBean> stocklist = (ArrayList<XxxxBean>) objectList ;

  // 3D棒グラフの作成の場合コメントアウトを外す
  ViewCreateBarChart3D(
    request,
    response,
    stocklist);

  // 3D円グラフの作成の場合コメントアウトを外す
//  ViewCreatePieChart3D(
//    request,
//    response,
//    stocklist);

  // レーダチャートの作成の場合コメントアウトを外す
//  ViewCreateSpiderWebPlot(
//    request,
//    response,
//    stocklist);
 
}

/** ------------------------------------------------------------
  * 3次元棒グラフを生成
  * @param request  リクエスト
  * @param response  レスポンス
  * @param stocklist データ
  * @throws IOException
  */
public void ViewCreateBarChart3D(
   HttpServletRequest request,
   HttpServletResponse response,
   ArrayList<XxxxBean> stocklist) throws IOException{

  //レガシーテーマを設定する
  ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());

  // 棒グラフの基となるデータセットを用意
     DefaultCategoryDataset objDpd = new DefaultCategoryDataset();

     // データセットに項目名と値を順にセット
     // 引数1 値
     // 引数2 系列
     // 引数3 項目
     for(int i=0;i< userstocklist.size(); i++){
       // get(i) で取得できるGetterを作成しておく
       objDpd.addValue(
         userstocklist.get(i).getStocknumber(),
         userstocklist.get(i).getStockbean().getStockname(),
         userstocklist.get(i).getStockbean().getStockname());
     }

     // 3次元棒グラフを生成
     //  第1引数 グラフタイトル、
     //  第2引数 横軸
     //  第3引数 縦軸
     //  第4引数 データ
     //  第5引数 VERTICAL:縦棒グラフ 、HORIZONTAL:横棒グラフ
     //  第6引数 判例を表示するか
     //  第7引数 ツールチップを表示するか
     //  第8引数 URLを動的に生成するか
     JFreeChart objCht=ChartFactory.createBarChart3D(
       "保有アイテム",
       "アイテム",
       "数量",
       objDpd,
       PlotOrientation.VERTICAL ,
       true,false,false);

     // JPEG形式で画像を出力
     writeChart(request,response,objCht);
}

/** ------------------------------------------------------------
  * 3次元円グラフを生成
  * @param request  リクエスト
  * @param response  レスポンス
  * @param stocklist データ
  * @throws IOException
  */
public void ViewCreatePieChart3D(
   HttpServletRequest request,
   HttpServletResponse response,
   ArrayList<XxxxBean> stocklist) throws IOException{

  //レガシーテーマを設定する
  ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());

  // 円グラフの基となるデータセットを用意
  DefaultPieDataset objDpd = new DefaultPieDataset();

     // データセットに項目名と値を順にセット
     // 引数1 項目
     // 引数2 値
     for(int i=0;i< userstocklist.size(); i++){
       objDpd.setValue(
         userstocklist.get(i).getStockbean().getStockname(),
         userstocklist.get(i).getStocknumber() );
     }

     // 3次元円グラフを生成
     //  第1引数 グラフタイトル、
     //  第2引数  データ
     //  第3引数 判例を表示するか
     //  第4引数 ツールチップを表示するか
     //  第5引数 URLを動的に生成するか
     JFreeChart objCht=ChartFactory.createPieChart3D(
       "保有アイテム",
       objDpd,
       true,false,false);

     // JPEG形式で画像を出力
    writeChart(request,response,objCht);
}

/** ------------------------------------------------------------
  * レーダーチャートを生成
  * @param request  リクエスト
  * @param response  レスポンス
  * @param stocklist データ
  * @throws IOException
  */
public void ViewCreateSpiderWebPlot(
   HttpServletRequest request,
   HttpServletResponse response,
   ArrayList<XxxxBean> stocklist) throws IOException{

  // 最大値
  int maxValue = 0 ;
 
  // レガシーテーマを設定する
  ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());

  // レーダーチャートの基となるデータセットを用意
     DefaultCategoryDataset objDpd = new DefaultCategoryDataset();

     // データセットに項目名と値を順にセット
     // 引数1 値
     // 引数2 系列
     // 引数3 項目
     for(int i=0;i< userstocklist.size(); i++){
      // 最大値の設定
      if( maxValue < userstocklist.get(i).getStocknumber() ){
       maxValue = userstocklist.get(i).getStocknumber() ;
      }
   objDpd.addValue(
     userstocklist.get(i).getStocknumber(),
     "Aさん",
     userstocklist.get(i).getStockbean().getStockname());
     }

     // 蜘蛛の巣プロットを生成
     SpiderWebPlot sp = new SpiderWebPlot(objDpd);
     // 最大値を設定
     sp.setMaxValue(maxValue);

     // レーダーチャートを生成
     //  第1引数 グラフタイトル、
     //  第2引数 ???
     //  第3引数 データ
     //  第4引数 ???
     JFreeChart objCht = new JFreeChart(
             "保有アイテム",
             JFreeChart.DEFAULT_TITLE_FONT,
             sp,
             true
         );

     // JPEG形式で画像を出力
     writeChart(request,response,objCht);

}

/** ------------------------------------------------------------
  * 画像を出力
  * @param request リクエスト
  * @param response レスポンス
  * @throws IOException
  */
public void writeChart(
   HttpServletRequest request,
   HttpServletResponse response,
   JFreeChart objCht)
throws IOException{

  // バイナリ出力ストリームにJPEG形式で画像を出力(360×240ピクセル)
     response.setContentType("image/jpeg");
     ServletOutputStream objSos=response.getOutputStream();
     ChartUtilities.writeChartAsJPEG(objSos,objCht,360,240);
}

※Get(Post)処理でサーブレットを呼び出し、サーブレット側で描画を行う。

2010年11月22日 (月)

JFreeChartのインストール

Servletでグラフを作成する場合に JFreeChart のライブラリを利用する

■JFreeChartのダウンロード

  サイト:http://www.jfree.org/jfreechart/

  1. Download を選択
  2. SourceForge download page を選択
  3. Download jfreechart-1.0.13.zip をダウンロード(2011年02月11日時点)

■JFreeChartのインストール

  1. ダウンロードファイルを任意のフォルダに解凍
  2. 解凍 lib フォルダ直下の「jfreechart-x.x.xx.jar」を
    [Tomcat実行フォルダ or ワークスペース]\WEB-INF\lib にコピーする
  3. 解凍 lib フォルダ直下の「jcommon-x.x.xx.jar」を
       [Tomcat実行フォルダ or ワークスペース]\WEB-INF\lib にコピーする

■パスの設定

  1. eclipse より、プロジェクト→プロパティーを選択
  2. Javaのビルドパスよりライブラリータブを選択
  3. Jar追加ボタンをクリック
  4. 「jfreechart-x.x.xx.jar」を選択する
  5. 「jcommon-x.x.xx.jar」を選択する
  6. OKボタンをクリックする
  7. eclipse 上の WEB-INF/lib をリフレッシュする