使用 ShieldUI Chart 控件在 ASP.NET 與 MVC 應用程式中打造銷售儀表板

在商業決策中，銷售儀表板扮演著關鍵角色，它能將複雜的業務數據轉化為直觀的視覺化圖表，幫助管理層快速掌握關鍵績效指標（KPI）。一個優秀的儀表板不僅需要精準的數據呈現，更要具備專業美觀的介面設計。本文將示範如何運用 ShieldUI Chart 控件，在 ASP.NET Web Forms 與 ASP.NET MVC 兩種架構下，分別建立功能完整的銷售儀表板。

專案完成預覽

完成後的儀表板展示如下圖所示，包含多種圖表類型的組合呈現：

開發環境準備

ShieldUI Chart 是一套功能豐富的圖表元件庫，支援多種圖表類型（長條圖、折線圖、圓餅圖、區域圖等），並提供豐富的客製化選項。開發者可從官網免費下載試用版本。

ASP.NET Web Forms 實作步驟

步驟 1：建立專案並引用組件

首先在 Visual Studio 中建立一個 ASP.NET Web Forms 專案。專案建立完成後，需將 ShieldUI 的核心組件 Shield.Web.UI.dll 加入專案參考中：

步驟 2：在頁面註冊控件

在 .aspx 頁面頂端註冊 ShieldUI 控件標籤前綴，以便在頁面中直接使用：

<%@ Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>

步驟 3：配置圖表資料來源與外觀

在頁面中拖放 <shield:Chart> 控件，並透過屬性視窗或程式碼後置設定資料來源、圖表類型、標題、圖例、座標軸等屬性。ShieldUI 支援將資料直接綁定至 DataSource 屬性，或透過 DataSourceID 連結資料來源控件。

ASP.NET MVC 實作步驟

步驟 1：安裝 NuGet 套件

在 MVC 專案中，透過 NuGet 套件管理器安裝 ShieldUI.Mvc 套件，這會自動引入必要的 JavaScript、CSS 檔案與伺服器端 Helper 類別。

步驟 2：控制器準備資料

在 Controller 中準備圖表所需的資料模型，並傳遞給 View：

public ActionResult Dashboard()
{
    var salesData = GetSalesData(); // 取得銷售資料
    return View(salesData);
}

步驟 3：View 中使用 Html Helper 渲染圖表

在 Razor View 中使用 @Html.ShieldChart() Helper 方法快速生成圖表：

@(Html.ShieldChart()
    .Name("salesChart")
    .Title(title => title.Text("月度銷售趨勢"))
    .DataSource(Model)
    .Series(series => series.Bar().Field("Amount").Name("銷售額"))
    .XAxis(axis => axis.CategoriesField("Month"))
)

進階功能與客製化

• 多圖表聯動：透過 JavaScript API 實現圖表間的篩選與鑽取互動
• 即時資料更新：結合 SignalR 或 AJAX 輪詢實現儀表板資料自動刷新
• 匯出與列印：內建支援圖片匯出（PNG、JPG）與 PDF 列印功能
• 響應式設計：圖表自動適應容器大小，完美支援行動裝置瀏覽

總結

ShieldUI Chart 為 .NET 開發者提供了強大且易用的圖表解決方案，無論是傳統的 Web Forms 還是現代的 MVC 架構，都能快速整合。透過豐富的 API 與靈活的配置選項，開發者能輕鬆打造出專業級的商業智慧儀表板，滿足企業多樣化的數據視覺化需求。