VB.NET Chart 控制項入門：繪製折線圖與餅圖的完整範例

需求

• X 軸：月份（1、2 月）
• Y 軸：人數（20、30）
• 同一 Chart 顯示**折線圖**與**餅圖**

完整 VB.NET 代碼 (WinForms, .NET Framework 4.x+)

Imports System.Windows.Forms.DataVisualization.Charting

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        SetupChart()
    End Sub

    Private Sub SetupChart()
        Dim chart As New Chart() With {
            .Dock = DockStyle.Fill
        }
        Me.Controls.Add(chart)

        ' --- 1. 建立 ChartArea (折線圖用) ---
        Dim areaLine As New ChartArea("LineArea") With {
            .AxisX = New Axis() With {
                .Title = "月份",
                .Interval = 1,
                .Minimum = 0.5,
                .Maximum = 2.5
            },
            .AxisY = New Axis() With {
                .Title = "人數",
                .Minimum = 0,
                .Maximum = 40
            }
        }
        chart.ChartAreas.Add(areaLine)

        ' --- 2. 建立 Series: 折線圖 ---
        Dim seriesLine As New Series("人數趨勢") With {
            .ChartType = SeriesChartType.Line,
            .ChartArea = "LineArea",
            .XValueType = ChartValueType.Int32,
            .YValueType = ChartValueType.Int32,
            .BorderWidth = 3,
            .MarkerStyle = MarkerStyle.Circle,
            .MarkerSize = 10,
            .Color = Color.Blue
        }
        seriesLine.Points.AddXY(1, 20)
        seriesLine.Points.AddXY(2, 30)
        chart.Series.Add(seriesLine)

        ' --- 3. 建立 ChartArea (餅圖用) ---
        Dim areaPie As New ChartArea("PieArea") With {
            .Position = New ElementPosition(50, 0, 50, 50) ' 右上角 50% 寬 50% 高
        }
        chart.ChartAreas.Add(areaPie)

        ' --- 4. 建立 Series: 餅圖 ---
        Dim seriesPie As New Series("人數分佈") With {
            .ChartType = SeriesChartType.Pie,
            .ChartArea = "PieArea",
            .XValueType = ChartValueType.String,
            .YValueType = ChartValueType.Int32,
            .IsValueShownAsLabel = True,
            .LabelFormat = "#%"
        }
        seriesPie.Points.AddXY("1月", 20)
        seriesPie.Points.AddXY("2月", 30)
        chart.Series.Add(seriesPie)

        ' --- 5. 圖例與標題 ---
        chart.Titles.Add(New Title("月份人數統計", Docking.Top, New Font("微軟正黑體", 14), Color.Black))
        chart.Legends.Add(New Legend("Default") With {.Docking = Docking.Bottom})
    End Sub
End Class

關鍵設定說明

1. 多 ChartArea：一個 Chart 可包含多個 ChartArea，透過 Series.ChartArea 指定系列繪製區域，即可混合折線圖與餅圖。
2. ElementPosition：以百分比定位餅圖區域 (X%, Y%, Width%, Height%)，避免與折線圖重疊。
3. IsValueShownAsLabel = True：餅圖直接顯示數值/百分比。
4. MarkerStyle/Size：折線圖資料點標記，增強可讀性。

設計工具快速操作

1. 工具箱拖曳 Chart 至表單。
2. 右鍵 Chart → Properties → Series 集合編輯器 → Add 兩個 Series，分別設 ChartType 為 Line、Pie。
3. 右鍵 Chart → ChartAreas 集合編輯器 → Add 兩個 Area，設定 Position。
4. 在 Form_Load 中用 Series.Points.AddXY 填入資料。

常見問題

• 餅圖不顯示 → 檢查 ChartArea.Position 是否在可見範圍、Series.ChartArea 名稱是否對應。
• X 軸月份顯示 0,1,2 → 設 AxisX.Minimum=0.5, Maximum=2.5, Interval=1 或改用 String 類別 X 值。

總結

VB.NET Chart 控制項透過**多 ChartArea + 多 Series** 即可在同一圖表混合折線圖與餅圖，核心在於正確配置 ChartArea 與 Series.ChartArea 對應關係。