您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> C# >> 關於C#

ZedGraph 入門教程第二節：ModInitialSampleDemo 進階裝飾元素與屬性微調實戰

編輯：關於C#

前言

承接第一節基礎範例，ModInitialSampleDemo.cs 引入了網格線、圖例定位、曲線加粗與區域填充、符號放大填充、背景漸層、文字標註、箭頭標註等專業圖表必備的裝飾元素。本節將逐一拆解其實現細節。

一、視覺效果預覽

修改版初始範例效果

圖例位置對比（Position = Bottom）：

圖例底部效果

二、核心程式碼解讀


public class ModInitialSampleDemo : DemoBase
{
    public ModInitialSampleDemo() : base("Code Project Modified Initial Sample", "Modified Initial Sample", DemoType.Tutorial)
    {
        GraphPane myPane = base.GraphPane;

        // 1. 基礎標題與軸標籤（同第一節）
        myPane.Title = "My Test Graph\n(For CodeProject Sample)";
        myPane.XAxis.Title = "My X Axis";
        myPane.YAxis.Title = "My Y Axis";

        // 2. 正弦波資料準備（同第一節）
        PointPairList list1 = new PointPairList();
        PointPairList list2 = new PointPairList();
        for (int i = 0; i < 36; i++)
        {
            double x = i + 5;
            double y1 = 1.5 + Math.Sin(i * 0.2);
            double y2 = 3.0 * (1.5 + Math.Sin(i * 0.2));
            list1.Add(x, y1);
            list2.Add(x, y2);
        }

        // 3. 新增兩條曲線
        LineItem myCurve = myPane.AddCurve("Porsche", list1, Color.Red, SymbolType.Diamond);
        LineItem myCurve2 = myPane.AddCurve("Piper", list2, Color.Blue, SymbolType.Circle);

        // 4. 標題顏色修改
        myPane.FontSpec.FontColor = Color.Green;

        // 5. 【重點】網格線顯示與顏色
        myPane.XAxis.IsShowGrid = true;
        myPane.YAxis.IsShowGrid = true;
        myPane.XAxis.GridColor = Color.LightGray;
        myPane.YAxis.GridColor = Color.LightGray;

        // 6. 【重點】圖例位置移至底部
        base.Pane.Legend.Position = ZedGraph.LegendPos.Bottom;

        // 7. 【重點】曲線加粗
        myCurve.Line.Width = 2.0F;
        myCurve2.Line.Width = 2.0F;

        // 8. 【重點】曲線下方區域填充（漸層）
        myCurve.Line.Fill = new Fill(Color.White, Color.Red, 45F);
        myCurve2.Line.Fill = new Fill(Color.White, Color.Blue, 45F);

        // 9. 【重點】符號放大並實心填充
        myCurve.Symbol.Size = 8.0F;
        myCurve2.Symbol.Size = 8.0F;
        myCurve.Symbol.Fill = new Fill(Color.Red);
        myCurve2.Symbol.Fill = new Fill(Color.White);

        // 10. 座標軸區域背景漸層
        myPane.AxisFill = new Fill(Color.White, Color.FromArgb(255, 255, 210), -45F);

        // 11. 【重點】文字標註：TextItem
        TextItem myText = new TextItem("Interesting\nPoint", 23F, 7F);
        myText.FontSpec.FontColor = Color.Red;
        myText.Location.AlignH = AlignH.Center;
        myText.Location.AlignV = AlignV.Top;
        myPane.GraphItemList.Add(myText);

        // 12. 【重點】箭頭標註：ArrowItem
        ArrowItem myArrow = new ArrowItem(Color.Red, 12F, 7F, 5F, 20F, 8F);
        myPane.GraphItemList.Add(myArrow);

        base.ZedGraphControl.AxisChange();
    }
}

三、關鍵技術點詳細講解

1. 網格線：IsShowGrid 與 GridColor

XAxis.IsShowGrid / YAxis.IsShowGrid：預設 false，設 true 顯示主網格線。
GridColor：控制網格線顏色，建議使用淡色（LightGray、Gainsboro）避免喧賓奪主。
進階：MinorGrid 可啟用次網格線，屬性同理。

2. 圖例：Legend 類核心屬性

Position：LegendPos 枚舉（Top、Left、Right、Bottom、InsideTopLeft 等 13 種）。
IsVisible：false 可完全隱藏圖例。
FontSpec：控制圖例字體大小、顏色、粗體等。
Fill / Border：圖例背景填充與邊框樣式。
IsHStack：水平/垂直排列圖例項。

3. 曲線區域填充：Line.Fill

myCurve.Line.Fill = new Fill(Color.White, Color.Red, 45F); 將曲線與 X 軸圍成的區域填充為漸層色。注意：此填充僅對 LineItem 有效，BarItem 使用 Bar.Fill。填充方向角度可配合曲線走勢調整（上升曲線用正角度，下降用負角度）以增強立體感。

4. 符號自定義：Symbol 屬性群

Size：符號尺寸（點），預設較小，報表建議 6~10。
Fill：符號內部填充。new Fill(Color.Red) 實心紅鑽；new Fill(Color.White) 實心白圓（配合藍色邊框形成空心效果）。
Type：SymbolType 枚舉（Circle、Diamond、Square、Triangle、Star 等 12 種）。
Border：符號邊框顏色/寬度。

5. TextItem：自由文字標註

建構式：new TextItem(text, x, y)，座標預設為數據座標系。
座標系切換：Location.CoordinateFrame = CoordType.PaneFraction 可改為相對圖表區比例（0~1），更適合固定位置標註（如水印、版權）。
對齊：AlignH (Left/Center/Right) + AlignV (Top/Center/Bottom) 精準控制錨點。
字體樣式：FontSpec 完整支援顏色、粗體、傾斜、大小、邊框、填充。