本教程主要演示了如何通過手動創建和填充系列在Visual Studio設計時構建一個web圖表。要創建一個簡單的未綁定圖表，需要執行以下操作：

創建一個圖表并為圖表添加系列

 1、創建一個新的ASP.NET Web應用程序（Visual Studio 2008或2010）或打開一個現有的應用程序。

2、在DX.12.1中可視化的“工具箱”選項卡上，拖動窗體上的WebChartControl。

3、要添加一個新系列到圖表中，單擊圖表的智能標簽，在標簽的動作列表中，點擊 Series鏈接。

4、在被激活的Series Collection Editor中，點擊Add。

5、在Series View Types對話框中，指定系列的視圖類型。

注意，圖表集中第一個可見系列的視圖類型決定了它的圖表類型。例如，選擇了Bar系列圖表就生成XY型圖表。

6、XtraCharts自動檢測系列參數的數據類型。這意味著在為圖表提供數據前，你不需要到指定SeriesBase.ArgumentScaleType屬性，因為它的默認設置為“Auto”（自動）。只需要確認SeriesBase.ValueScaleType屬性的默認值滿足你的視圖類型的需求。否則的話，你需要選擇另外一個值規模類型，例如Bar系列視圖。

你可以在對話框的屬性標簽中執行ValueScaleType行為。

7、要手動添加數據點到您的系列中，你需要切換回到Points選項卡。雖然有一些系列視圖類型的每一個參數可能需要一個以上的值，如（在泡沫或股票系列）。

8、在圖表中，你可以根據需要創建很多不同系列的圖表。如果視圖類型兼容的話，你還甚至可以在同一個圖表中結合一系列不同的視圖類型。

若要套用更改并退出對話框，單擊“Close”。現在，您的圖表中有兩個不同的并且已經填充了數據點的系列，如下圖所示：

自定義圖表

9、自定義圖例

默認情況下，圖表的圖例顯示在圖表右上角。要改變圖例的位置，在Properties窗口中，展開ChartControl.Legend屬性，并將Legend.AlignmentHorizontal屬性設置為Center，Legend.AlignmentVertical屬性設置為TopOutside， Legend.Direction屬性設置為LeftToRight。

10、添加一條Constant Line

為了突出交叉在任何軸的值，你可以繪制Constant Line。要繪制Constant Line，你需要展開WebChartControl.Diagram屬性，然后是Properties窗口中的 XYDiagram.AxisY屬性。然后，點擊省略號按鈕，設置Axis2D.ConstantLines 屬性。

在Constant Line Collection Editor中，點擊Add創建一個constant line，指定ConstantLine.AxisValue屬性，并調整屬性選項。

結果如下：

11、在不同的窗格中展示系列

通過圖表的智能標簽，調用Series Collection Editor。選擇Spline系列，并且切換到對話框的Properties 標簽。展開SeriesBase.View屬性，并且XYDiagramSeriesViewBase.Pane屬性調用下拉菜單，然后點擊New pane。

關閉對話框并查看結果：

12、自定義十字光標

默認情況下，十字光標會自動顯示在一個圖表控件上。你可以使用ChartControl.CrosshairEnable屬性啟用或者禁用十字光標。

本文中，我們來禁用Bar系列的十字標簽。通過圖表的智能標簽，調用Series Collection Editor。然后，在Series1的Properties 標簽中找到SeriesBase.CrosshairEnabled屬性，并將其設置為false。

運行程序并確保十字線標簽僅出現在Spline 系列中。

讓我們在圖表中顯示十字軸線和十字軸標簽。要做到這一點，
你需要在屬性網格中找到CrosshairOptions對象，并將 CrosshairOptions.ShowArgumentLine, CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels, CrosshairOptions.ShowValueLabels屬性設置為true，如下圖所示：

運行程序，結果如下圖所示：