JFreeChart 實戰：打造 Web 圖表引擎從入門到互動熱點

Web 應用發展使報表系統從桌面走向瀏覽器。傳統 OS 控件無法適應多元客戶端，伺服器端生成圖片回傳成為主流。本文介紹開源圖表引擎 JFreeChart，涵蓋環境建置、核心架構、柱狀/餅圖實戰、Servlet 輸出、進階熱點圖表 (ImageMap) 互動功能。

一、JFreeChart 專案簡介

• SourceForge 開源專案，純 Java 實現
• 支援圖表：餅圖、柱狀圖 (堆疊/分組)、線圖、區域圖、散佈圖、混合圖、甘特圖、儀表板等
• 官網：jfree.org | 下載：SourceForge
• 必備兩套 JAR：jfreechart-0.9.11.jar + jcommon-0.8.6.jar (缺 jcommon 會報莫名錯誤)
• Eclipse 開發若遇 UnsatisfiedLinkError: initDDraw → VM 參數加 -Dsun.java2d.noddraw=true 關閉 DirectDraw

輸出範例

二、核心類別架構解析

⚠️ 架構大量使用工廠方法，擴展新圖表類型較繁瑣；Plot/Axis/Renderer 組合複雜，初學者需熟悉各構造函數參數含義。

三、基礎圖表實戰

1. 3D 柱狀圖 (含分組資料)

public class BarChartDemo {
    public static void main(String[] args) throws IOException {
        CategoryDataset dataset = getDataSet2(); // 分組資料集
        JFreeChart chart = ChartFactory.createBarChart3D(
            "水果產量圖", "水果", "產量", dataset,
            PlotOrientation.VERTICAL, true, false, false);

        FileOutputStream fos = new FileOutputStream("D:\\fruit.jpg");
        ChartUtilities.writeChartAsJPEG(fos, 1.0f, chart, 400, 300, null);
        fos.close();
    }

    private static CategoryDataset getDataSet2() {
        DefaultCategoryDataset ds = new DefaultCategoryDataset();
        ds.addValue(100, "北京", "蘋果"); ds.addValue(100, "上海", "蘋果"); ds.addValue(100, "廣州", "蘋果");
        ds.addValue(200, "北京", "梨子"); ds.addValue(200, "上海", "梨子"); ds.addValue(200, "廣州", "梨子");
        ds.addValue(300, "北京", "葡萄"); ds.addValue(300, "上海", "葡萄"); ds.addValue(300, "廣州", "葡萄");
        ds.addValue(400, "北京", "香蕉"); ds.addValue(400, "上海", "香蕉"); ds.addValue(400, "廣州", "香蕉");
        ds.addValue(500, "北京", "荔枝"); ds.addValue(500, "上海", "荔枝"); ds.addValue(500, "廣州", "荔枝");
        return ds;
    }
}

2. 3D 餅圖

public class PieChartDemo {
    public static void main(String[] args) throws IOException {
        DefaultPieDataset data = getDataSet();
        JFreeChart chart = ChartFactory.createPie3DChart(
            "水果產量圖", data, true, false, false);
        // 寫檔同柱狀圖
    }
    private static DefaultPieDataset getDataSet() {
        DefaultPieDataset ds = new DefaultPieDataset();
        ds.setValue("蘋果", 100); ds.setValue("梨子", 200);
        ds.setValue("葡萄", 300); ds.setValue("香蕉", 400); ds.setValue("荔枝", 500);
        return ds;
    }
}

四、Servlet 直接輸出圖片到瀏覽器

public class ChartDemoServlet extends HttpServlet {
    public void service(ServletRequest req, ServletResponse res)
            throws ServletException, IOException {
        res.setContentType("image/jpeg");
        DefaultPieDataset data = getDataSet();
        JFreeChart chart = ChartFactory.createPie3DChart("水果產量圖", data, true, false, false);
        ChartUtilities.writeChartAsJPEG(res.getOutputStream(), 1.0f, chart, 400, 300, null);
    }
    // getDataSet() 同前
}

五、進階主題：互動熱點圖表

需求：用戶點擊柱狀圖「蘋果」→ 顯示各地區蘋果產量明細。
HTML 實現需 <map> + <area> 定義熱點區域：

<map name="chartMap">
  <area shape="rect" coords="81,15,126,254" href="?series=0&category=100" title="100 = 7,048" onclick="clickChart('100')">
  <area shape="rect" coords="143,27,188,255" href="?series=0&category=200" title="200 = 6,721" onclick="clickChart('200')">
  ...
</map>

JFreeChart 生成 ImageMap 流程

1. 建立 ChartRenderingInfo info = new ChartRenderingInfo()
2. 配置 Plot 產生器：

   PiePlot plot = (PiePlot) chart.getPlot();
   plot.setURLGenerator(new StandardPieURLGenerator("detail.jsp"));
   plot.setToolTipGenerator(new StandardPieToolTipGenerator());

3. 輸出圖片時傳入 info：

   ChartUtilities.writeChartAsJPEG(fos, 1.0f, chart, 400, 300, info);

4. 提取 Map 資料：

   PrintWriter pw = new PrintWriter(new FileOutputStream("d:\\fruit.map"));
   ChartUtilities.writeImageMap(pw, "chartMap", info);
   pw.flush(); pw.close();

生成的 fruit.map 即為 HTML <map> 內容。建議以標籤庫封裝圖片與 Map 名稱關聯，確保一致性。

部署建議

• 生產環境建議啟用圖片快取 (檔案名含參數雜湊)
• 大數據集考慮分頁/抽樣繪圖，避免 OOM
• 搭配 AJAX 實現點擊熱點後局部刷新明細，體驗更佳