ASP.NET 圖表繪製全攻略 (下)：PieChart/BarChart 實戰應用

架構回顧

上篇建立 Insight_cs.WebCharts 類別庫，包含 PieChart、BarChart、ChartUtil 三個類別，皆提供 Render(title, subTitle, width, height, DataSet, Stream) 方法。

前端頁面 SalesChart.aspx (純圖片輸出)

<%@ Page ContentType="image/gif" Language="C#" AutoEventWireup="false" 
    Codebehind="SalesChart.aspx.cs" Inherits="Insight_cs.SalesChart" %>

• ContentType="image/gif" 直接輸出圖片串流，可用於 <img src="SalesChart.aspx?type=PIE&width=400&height=300" />。

後端 SalesChart.aspx.cs 核心邏輯

private void Page_Load(object sender, EventArgs e) {
    // 1. 取得資料
    string sql = @"SELECT Year(ord_date) As [Year], SUM(qty) As [Qty]
                   FROM sales sa INNER JOIN stores st ON sa.stor_id = st.stor_id
                   GROUP BY Year(ord_date) ORDER BY [Year]";
    var da = new SqlDataAdapter(sql, connStr);
    var ds = new DataSet();
    int rows = da.Fill(ds, "chartData");

    // 2. 讀取查詢字串參數
    string type = Request["type"]?.ToUpper() ?? "PIE";
    int width = int.TryParse(Request["width"], out var w) ? w : 400;
    int height = int.TryParse(Request["height"], out var h) ? h : 400;
    string title = Request["title"] ?? "";
    string subTitle = Request["subtitle"] ?? "";

    // 3. 依類型渲染
    if (rows > 0) {
        switch (type) {
            case "PIE": new PieChart().Render(title, subTitle, width, height, ds, Response.OutputStream); break;
            case "BAR": new BarChart().Render(title, subTitle, width, height, ds, Response.OutputStream); break;
        }
    }
}

部署與使用

1. 編譯類別庫 → 參考於 Web 專案。
2. 部署 SalesChart.aspx 及代碼後置。
3. 在任何頁面以 <img src="SalesChart.aspx?type=BAR&title=年度銷售" /> 嵌入動態圖表。