兩種策略對比
| 策略 | 原理 | 優點 | 缺點 |
|---|
| 預製圖片拉伸 (條形圖) | 準備 1px 寬基礎圖片，<img width=N> 拉伸 | 極快、無運算、適合簡單條形/進度條 | 僅限矩形塊、無法畫曲線、餅圖 |
| 服務端定時生成圖片檔 | Servlet 定時查詢 DB、繪製 BufferedImage、編碼 JPEG/PNG 寫入磁碟，前端直連靜態圖片 | 支援任意複雜圖表、前端零負擔、可快取 | 需排程觸發、磁碟 I/O、非即時 |
Servlet 生成圖片檔完整範例
public class ChartServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String filePath = "e:/temp/chart.jpg";
try (FileOutputStream fos = new FileOutputStream(filePath)) {
BufferedImage img = new BufferedImage(400, 300, BufferedImage.TYPE_INT_RGB);
Graphics2D g = img.createGraphics();
g.setColor(Color.WHITE); g.fillRect(0, 0, 400, 300);
g.setColor(Color.BLUE); g.drawString("Finance Summary", 20, 20);
// 繪製柱狀、折線、圖例等...
ImageIO.write(img, "JPEG", fos); // JDK 內建 ImageIO 替代舊 com.sun.image.codec.jpeg
}
// 可選：直接輸出給瀏覽器 resp.setContentType("image/jpeg"); ImageIO.write(img, "JPEG", resp.getOutputStream());
}
}
工程建議
- 優先使用
ImageIO (標準 API)，避免依賴 com.sun.* 內部類。
- 複雜圖表採用成熟庫：JFreeChart、XChart、ECharts (前端渲染) 等。
- 高併發場景：生成圖片寫入快取 (Redis/檔案系統) + CDN 分發，Servlet 僅做快取失效重建。
- 即時性要求高：改用前端 Canvas/SVG (ECharts, Chart.js) 直接渲染 JSON 數據。
