JFreeChartを使って、グラフを出力するサーブレットと、ウェブページにグラフを表示するサンプルです。
JFreeChartはJava用のグラフを出力するライブラリです。

■目次


JFreeChartのセットアップ

ダウンロード

JFreeChartのサイトでぽちぽちクリックしていると、SourceForgeに移動しました。
さらに「JFreeChart」のリンクをクリックすると色んなバージョンの番号が見えます。
今回は「1.0.14」を選んでみました。
zipファイルと、tar.gzファイルが選べたので今回は「jfreechart-1.0.14.zip」をダウンロードしました。

インストール

1.ダウンロードしたファイルから、以下の2ファイルを取り出します。
jcommon-1.0.17.jar
jfreechart-1.0.14.jar

2.Tomcatプロジェクトの「/WEB-INF/lib」ディレクトリに上記のファイルをコピーします。
Tomcatは「/WEB-INF/lib」ディレクトリに配置したjarファイルをアプリケーションから利用出来るので、これだけでJFreeChartを利用する準備完了です。

eclipseの設定

Tomcatのための設定は「/WEB-INF/lib」にjarファイルを配置すれば完了ですが、eclipseでもクラスパスにjarファイルを入れて上げないとコンパイルエラーが出て大変です。
eclipseのための設定は、eclipseから「/WEB-INF/lib」にコピーしたjarファイルを選択し、右クリックメニューから「ビルドパス→ビルドパスに追加」を選択すれば完了です。
これで、eclipseでJFreeChartアプリを開発出来る準備が整いました。

サンプルアプリケーション

サンプルサーブレット JFreeChartSample.java

import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.PiePlot;
import org.jfree.data.general.DefaultPieDataset;
 
/**
 * [Tomcat] JFreeChartで動的にグラフを出力するサンプル。
 */
public class JFreeChartSample extends HttpServlet {
  @Override
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
 
    // コンテンツタイプ設定
    response.setContentType("image/png");
 
    // 円グラフのデータ作成
    DefaultPieDataset data = new DefaultPieDataset();
    data.setValue("いちご", 1500);
    data.setValue("オレンジ", 1500);
    data.setValue("バナナ", 5000);
 
    // JFreeChartオブジェクト作成
    JFreeChart chart = new JFreeChart(new PiePlot(data));
 
    // 円グラフ出力
    ChartUtilities.writeChartAsPNG(response.getOutputStream(), chart, 200, 200);
 
    // アウトプットストリームをフラッシュ
    response.getOutputStream().flush();
  }
}
 
  • 簡単な円グラフを出力するサーブレットなら簡単に出来ます。
  • ポイントは2つで、1つは以下のコンテンツタイプ設定。
response.setContentType("image/png");
コンテンツタイプを設定するとブラウザが「画像なんだな」とスムーズに判断してくれます。

  • もう1つは、以下の円グラフ出力に使っているメソッド。
ChartUtilities.writeChartAsPNG(response.getOutputStream(), chart, 200, 200);
この「writeChartAsPNG」を使うことで、レスポンスのアウトプットストリームにpngのイメージを出力しています。
一次的にファイルに保存する必要がないので便利です。
※「saveChartAsPNG」を使うと、「pngファイル」を実際のファイルに出力スルことができます。

web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<web-app 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-app_3_0.xsd"
  version="3.0">
 
  <!-- サーブレットの宣言 -->
  <servlet>
    <servlet-name>JFreeChartSample</servlet-name>
    <servlet-class>JFreeChartSample</servlet-class>
  </servlet>
 
  <!-- サーブレットとurlのマッピング -->
  <servlet-mapping>
    <servlet-name>JFreeChartSample</servlet-name>
    <url-pattern>/chart/piechart.png</url-pattern>
  </servlet-mapping>
 
</web-app>
 
  • サーブレットのマッピングで、以下のように<url-pattern>に画像ファイル名を入れておくと、グラフを保存したい人に便利です。
<url-pattern>/chart/piechart.png</url-pattern>

  • 画像ファイルの部分をワイルドカードにして、ファイル名をhtml側で自由に決めさせるのもいいでしょう。
<url-pattern>/chart/*</url-pattern>


動作確認

http://localhost:8080/jfc/chart/piechart.png」にアクセスして以下の様なグラフが表示されれば成功です。
※「jfc」の部分にはコンテキストを設定してください。



サンプルアプリケーションその2 ウェブページ(jsp)にグラフを表示する

上記のサンプルでは、グラフ作成サーブレットのアドレスを直接叩いてグラフを表示しましたが、通常はウェブページの中に埋め込んで利用する方が多いと思います。
ウェブページにJFreeChartで作成したグラフを表示させるには、上記で動作確認に利用したアドレス「http://localhost:8080/jfc/chart/piechart.png」を表示するhtmlを作成します。

サンプルJSP index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>[Tomcat] ウェブページにJFreeChartで動的に生成したグラフを表示する。</title>
</head>
<body>
  <h1>[Tomcat] ウェブページにJFreeChartで動的に生成したグラフを表示する。</h1>
  <img src='<%=request.getContextPath()%>/chart/piechart.png'>
  <p>ウェブページにJFreeChartで動的に生成したグラフを表示するサンプルです。 </p>
</body>
</html>
 
  • サンプルJSPの肝は、以下のimgタグです。
<img src='<%=request.getContextPath()%>/chart/piechart.png'>

  • imgタグの属性srcに、先ほど作成したグラフ作成サーブレットのアドレスを設定する事で、グラフ作成サーブレットにリクエストが飛んで、ウェブページの中に動的に生成したグラフが表示されます。

動作確認

http://localhost:8080/jfc/」にアクセスして以下の様なグラフが表示されれば成功です。
※「jfc」の部分にはコンテキストを設定してください。

サンプルダウンロード


コメント(バグ、間違い、こんな情報が欲しい等ありましたら)

  • 質問よろしいでしょうか? 折れ線グラフの表示のサンプルコードがございましたら、教えて貰ってもよろしいでしょうかお願いします。 - ドムッち 2013-09-10 11:38:31
名前:

アンケート(このページの情報はお役に立ちましたか?)

順位 選択肢 得票数 得票率 投票
1 役に立った 12 (63%)
2 分かりにくい 5 (26%)
3 役に立たない 2 (11%)
4 間違っている 0 (0%)
その他
投票総数 19