ASP.NET Web Pages - Chart 幫助器完整實戰：從陣列、資料庫、XML 打造專業級資料視覺化

Chart 幫助器內建豐富圖表類型 (長條圖、圓餅圖、折線圖、面積圖、股票圖等)，支援多種資料源與高度客製化選項，零第三方相依即可產出專業圖表影像。

Chart 幫助器核心架構

運作流程： 建立 Chart 物件 → 設定尺寸/標題 → 加入資料系列 → 輸出影像 (Write/ToBytes/Save)

資料源支援： 陣列/集合、資料庫查詢結果、XML 檔案、DataTable/DataView

場景一：陣列資料源 - 快速原型與靜態報表

@{
 var myChart = new Chart(width: 600, height: 400)
 .AddTitle("員工績效統計")
 .AddSeries(
 chartType: "Column",           // 長條圖
 xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
 yValues: new[] { "2", "6", "4", "5", "3" }
 )
 .Write(); // 直接輸出至 HTTP 回應 (image/png)
}

關鍵方法解析：

• new Chart(w, h)：建立圖表畫布
• AddTitle(text)：設定圖表標題
• AddSeries(...)：加入資料系列，核心參數：chartType (Column/Bar/Line/Pie/Area/Point/Stock...)、xValue (X 軸標籤)、yValues (數值)
• Write()：輸出 PNG 影像至回應流 (Content-Type: image/png)

場景二：資料庫資料源 - 動態商業報表

方法 A：DataBindTable - 簡單快速繫結

@{
 var db = Database.Open("SmallBakery");
 var dbData = db.Query("SELECT Name, Price FROM Product");
 var myChart = new Chart(width: 600, height: 400)
 .AddTitle("產品價格分布")
 .DataBindTable(dataSource: dbData, xField: "Name") // 自動以 Name 為 X 軸，其他數值欄為系列
 .Write();
}

DataBindTable 自動偵測數值欄位建立系列，適合快速探索性分析。

方法 B：AddSeries - 精確控制與多系列

@{
 var db = Database.Open("SmallBakery");
 var dbData = db.Query("SELECT Name, Price FROM Product");
 var myChart = new Chart(width: 600, height: 400)
 .AddTitle("產品銷售佔比")
 .AddSeries(
 chartType: "Pie",              // 圓餅圖
 xValue: dbData, xField: "Name", // X 軸：產品名稱
 yValues: dbData, yFields: "Price" // Y 軸：價格數值
 )
 .Write();
}

AddSeries 進階參數： name (系列名稱)、chartArea (多圖表區域)、axisLabel (軸標籤格式)、legend (圖例文字)、markerStep (資料點標記間距)、options (顏色、陰影、3D 效果等)。

場景三：XML 資料源 - 異構系統整合

@using System.Data;

@{
 var dataSet = new DataSet();
 dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd")); // 結構描述 (可選)
 dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml"));       // 實際資料
 var dataView = new DataView(dataSet.Tables[0]);

 var myChart = new Chart(width: 600, height: 400)
 .AddTitle("員工銷售業績")
 .AddSeries(
 "Default", chartType: "Pie",
 xValue: dataView, xField: "Name",
 yValues: dataView, yFields: "Sales"
 )
 .Write();
}

XML 結構範例 (data.xml)：

<?xml version="1.0"?>
<NewDataSet>
 <Table>
 <Name>Alice</Name>
 <Sales>12500</Sales>
 </Table>
 <Table>
 <Name>Bob</Name>
 <Sales>9800</Sales>
 </Table>
</NewDataSet>

圖表類型完整支援清單

進階客製化：樣式、圖例、標題、輸出模式

@{
 var chart = new Chart(800, 500, theme: ChartTheme.Blue) // 內建主題: Blue, Green, Yellow, Vanilla
 .AddTitle("年度營收趨勢", fontColor: "DarkBlue", fontSize: 16)
 .AddLegend("營收(百萬)", title: "圖例")
 .AddSeries(
 "Revenue", chartType: "Line",
 xValue: years, yValues: revenue,
 markerStep: 1, // 每個點顯示標記
 seriesOptions: new { Color = "Blue", BorderWidth = 3, ShadowOffset = 2 }
 )
 // 輸出模式選擇：
 // .Write()           → 直接輸出至 Response (預設 PNG)
 // .Write("jpeg")     → 指定格式
 // .ToBytes()         → 回傳 byte[] 供進一步處理
 // .Save("~/charts/revenue.png") // 儲存檔案
 .Write();
}

整合至網頁：img 標籤與快取策略

<!-- 動態產生圖表 -->
<img src="ChartGenerator.cshtml?year=2024" alt="2024 營收圖表" />

<!-- 或儲存靜態檔案，配合快取 -->
@{
 if (!File.Exists(Server.MapPath("~/charts/revenue_2024.png"))) {
 // 產生並儲存
 new Chart(...).Save("~/charts/revenue_2024.png");
 }
}
<img src="@Href("~/charts/revenue_2024.png")" alt="2024 營收圖表" />

生產環境建議：預先產生靜態圖表影像、配合 CDN 快取、使用 JavaScript 圖表庫 (Chart.js, Highcharts, ECharts) 實現互動式前端圖表。