您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

C# 圖表控件 dotnetCHARTING 實戰：構建專業統計報表（柱狀、餅圖、折線）

編輯：Java 相關知識

前言

dotnetCHARTING 是一款功能強大的 .NET 圖表控件，支援 WinForms、WebForms、ASP.NET MVC 等多種平台，能生成極具視覺衝擊力的 2D/3D 統計圖表。本文基於 WinForms 版本，通過封裝通用繪圖類 ShowData，實現柱狀圖、餅圖、折線圖的快速構建，並解決數據綁定、樣式統一、資源管理等工程化問題。

一、核心封裝類：ShowData 設計思路

將圖表屬性（標題、坐標軸、色調、字體、尺寸）與繪圖邏輯分離，對外暴露簡潔 API：

public class ShowData {
    // --- 屬性區 ---
    public string Title { get; set; }           // 圖表標題
    public string XTitle { get; set; }          // X軸標題
    public string YTitle { get; set; }          // Y軸標題
    public string SeriesName { get; set; }      // 圖例名稱
    public string PhaysicalImagePath { get; set; } // 圖片輸出目錄
    public int PicWidth { get; set; } = 800;
    public int PicHight { get; set; } = 500;
    public DataTable DataSource { get; set; }   // 單數據源
    public DataSet DataSetSource { get; set; }  // 多数據源（對比圖）
    public SeriesType ChartDefaultSeriesType { get; set; } = SeriesType.Column;
    public ChartType ChartType { get; set; } = ChartType.Combo;
    public int StaticColumnWidth { get; set; } = 0;
    public int NumberPercision { get; set; } = 2; // 小數位
    // 樣式屬性...
    public Color TitleBoxColor { get; set; } = Color.Blue;
    public Font TitleBoxFont { get; set; } = new Font("Arial", 10, FontStyle.Bold);
    public Color ChartAreaBackgroundColor { get; set; } = Color.Honeydew;
    // ... 其他字體、顏色屬性

    // --- 公共繪圖方法 ---
    public void CreateColumn(Chart chart) { /* 柱狀圖 */ }
    public void CreateColumn(Chart chart, List tableIndices) { /* 多表對比柱狀圖 */ }
    public void CreatePie(Chart chart) { /* 餅圖 */ }
    public void CreateLine(Chart chart) { /* 折線圖 */ }
}

二、三大圖表類型實現細節

1. 柱狀圖 — CreateColumn

單系列：DataSource 為單表，遍歷行生成 Element，自動分配調色盤色彩。
多系列對比：DataSetSource 包含多表，通過 tableIndices 指定對比表，合併鍵值（如油品名）補齊缺失值為 0，生成多 Series。
關鍵配置：chart.Type = ChartType.ComboHorizontal（橫向）、StaticColumnWidth 控制柱寬、ShadingEffectMode 立體感。

2. 餅圖 — CreatePie

數據源每行一個 Series，Element.YValue 為數值，Name 為標籤。
chart.Type = ChartType.Pie，PieLabelMode = Outside 標籤外置，Transparency 透明度增強層次。

3. 折線圖 — CreateLine

適用於時間序列對比（如「今日 vs 昨日」油量趨勢）。
GetRandomData() 內部按 DateChartEnum.Day/Month/Year 生成固定刻度（24小時/31天/12月），填充實際數據。
chart.DateGrouping = TimeInterval.Day 自動分組，SeriesType.Line 折線樣式，雙線不同色區分。

三、調用示例：一鍵生成儀表板

// 假設 dsSet 為包含多張表的 DataSet
var show = new ShowData {
    Title = "近30天加油會員統計",
    XTitle = "人數", YTitle = "會員分類",
    SeriesName = "詳細概況",
    PhaysicalImagePath = "ChartImages",
    DataSource = dsSet.Tables[0],
    TitleBoxColor = Color.Blue,
    TitleBoxFont = new Font("Arial", 10, FontStyle.Bold),
    ChartAreaBackgroundColor = Color.Honeydew,
    ChartDefaultSeriesType = SeriesType.Column,
    ChartType = ChartType.ComboHorizontal,
    StaticColumnWidth = 80
};

// 1. 橫向柱狀圖
show.CreateColumn(chart1);

// 2. 餅圖（復用配置，修改標題與數據源）
show.NumberPercision = 0;
show.YTitle = "油量(升)";
show.XTitle = "";
show.DataSource = dsSet.Tables[0];
show.CreatePie(chart2);

// 3. 雙表對比柱狀圖（今日 vs 昨日）
show.YTitle = "油量(升)";
show.XTitle = "油品";
show.StaticColumnWidth = 0;
show.CreateColumn(chart3, new List { 0, 1 }); // 使用 dsSet.Tables[0] 和 [1]

// 4. 趨勢折線圖
show.YTitle = "油量(升)";
show.XTitle = "時間";
show.DataSource = dsSet.Tables[4];
show.CreateLine(chart5);

四、關鍵技術點解析

1. 數據轉 SeriesCollection 的通用邏輯

private SeriesCollection GetArrayData() {
    var sc = new SeriesCollection();
    var s = new Series();
    foreach (DataRow row in _dt.Rows) {
        var e = new Element {
            Name = row[1].ToString(),
            YValue = Convert.ToDouble(row[2])
        };
        e.SmartLabel.Font = new Font("Microsoft Sans Serif", 10, FontStyle.Bold);
        s.Elements.Add(e);
    }
    s.Palette = new Color[] { Color.FromArgb(0,156,255), Color.FromArgb(255,99,49), ... };
    sc.Add(s);
    return sc;
}

2. 多表對比時的鍵值合併


// 將兩表按名稱合併為 Dictionary，缺失補 0
var dictT = dt1.Rows.Cast().ToDictionary(r => r[1].ToString(), r => r[2].ToString());
var dictY = dt2.Rows.Cast().ToDictionary(r => r[1].ToString(), r => r[2].ToString());
// 取並集鍵，構建兩個 Series
foreach (var key in dictT.Keys.Union(dictY.Keys)) {
    sToday.Elements.Add(new Element { Name = key, YValue = Convert.ToDouble(dictT.GetValueOrDefault(key, "0")) });
    sYest.Elements.Add(new Element { Name = key, YValue = Convert.ToDouble(dictY.GetValueOrDefault(key, "0")) });
}

3. 圖片輸出與資源管理

chart.TempDirectory 指定圖片生成目錄（相對或絕對路徑）。
控件內部生成臨時圖片文件，建議定期清理或配置自動刪除。
WinForms 中直接賦值 chart.Image 到 PictureBox 顯示，無需落盤。

五、常見坑點與避雷指南

問題	原因	解決
圖表顯示空白/報錯	數據源為空或列索引越界	繪圖前驗證 `DataSource != null && Rows.Count > 0`
中文標題/標籤亂碼	字體不支援中文	統一設置 `Font = new Font("Microsoft YaHei", ...)`
雙Y軸刻度衝突	兩系列量級差異大	使用 `ChartType.Combo` 組合圖，或手動設置 `YAxis.Scale`
Web 版圖片不顯示	TempDirectory 無寫入權限/虛擬路徑映射錯誤	配置 IIS 寫入權限，使用 `Server.MapPath` 解析路徑
授權水印	使用試用版/未授權版本	購買商業授權或使用開源替代

六、開源替代推薦

若項目預算有限，推薦以下免費開源庫：

LiveCharts2：WPF/WinForms/Avalonia，MVVM 友好，MIT 協議。
ScottPlot：高性能、無依賴、支援即時繪圖，MIT 協議。
OxyPlot：跨平台、功能豐富，MIT 協議。
Chart.js (via WebView)：前端渲染，極豐富的圖表類型。

總結

dotnetCHARTING 憑藉豐富的圖表類型、精細的樣式控制、強大的數據綁定能力，在企業級報表系統中佔有一席之地。通過本文的 ShowData 封裝模式，可將繁瑣的屬性配置集中管理，業務代碼僅需關注「數據源 + 圖表類型」，大幅提升開發效率與維護性。遷移至開源庫時，同樣適用「配置與邏輯分離」的設計思想。