dotnetCHARTING 控件快速入門：ASP.NET 整合、3D 組合圖、SeriesCollection 動態資料繫結完整範例

dotnetCHARTING 是功能強大的商業圖表控件，支援 3D、動態更新、豐富圖表類型。本文提供 ASP.NET WebForms 整合入門範例。

前端註冊與標記

<%@ Register Assembly="dotnetCHARTING" Namespace="dotnetCHARTING" TagPrefix="dn" %>
<div style="text-align:center;">
  <dn:Chart ID="Chart1" runat="server" Height="200px" Width="740px" />
</div>

後端核心代碼

using dotnetCHARTING;
using System.Drawing;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Chart1.Debug = false;
        Chart1.Type = ChartType.Combo;           // 組合圖 (長條+線)
        Chart1.Title = "10 筆統計圖";
        Chart1.TempDirectory = "temp";           // 圖片快取目錄 (需寫入權限)
        Chart1.Use3D = true;                     // 啟用 3D 效果
        Chart1.DefaultSeries.DefaultElement.ShowValue = true; // 顯示數值標籤

        Chart1.SeriesCollection.Add(GetData());
    }
}

public SeriesCollection GetData()
{
    SeriesCollection sc = new SeriesCollection();
    Series s1 = new Series { Name = "總用戶" };

    Random r = new Random();
    for (int i = 0; i < 10; i++)
    {
        Element e = new Element
        {
            Name = "點" + i,
            YValue = r.Next(1, 100) // 動態資料
        };
        s1.Elements.Add(e);
    }

    sc.Add(s1);
    // 設定系列顏色
    sc[0].DefaultElement.Color = Color.FromArgb(49, 255, 49); // 亮綠
    return sc;
}

關鍵屬性速查

授權與部署提醒

• 商業控件，需購買授權用於生產環境。
• TempDirectory 需 IIS 執行身分 (ApplicationPoolIdentity/NETWORK SERVICE) 具備「寫入」權限。
• 圖片輸出為 <img src="ChartImg.axd?..." />，確保 ChartImg.axd HTTP Handler 已註冊 (通常自動)。

現代替代方案

• 免費開源：LiveCharts2 (WPF/WinUI/MAUI)、Chart.js / ECharts / ApexCharts (JS 前端渲染、API 友善)。
• Microsoft 官方：Microsoft Chart Controls (System.Web.UI.DataVisualization.Charting，.NET 3.5 SP1 內建，免費)。

dotnetCHARTING 適合快速構建豐富後台報表，新專案建議評估前端圖表庫分離渲染壓力。