教學課程：將圖表資料繫結至資料庫

發行項
08/31/2012

此教學課程示範如何繫結資料庫中的資料，以及如何在圖表中使用工具提示和調整軸標籤。

若要完成此教學課程，您必須在已經安裝的 SQL Server 執行個體 (例如 SQL Server 2008 Express) 中安裝 AdventureWorks2008 範例 OLTP 資料庫。若要安裝此範例資料庫，請前往 www.codeplex.com。

從資料庫繫結資料

您必須先從資料來源控制項將資料繫結到 Chart 控制項，然後再從資料來源將特定的資料行繫結到數列的 X 值和 Y 值。

若要將資料從資料庫繫結到圖表

在 Windows Form 或 Web 應用程式的設計介面中，從 [工具箱] 拖放 Chart 控制項：
在 Chart 控制項的 [屬性] 視窗中，按一下 [資料] 分類中的 [DataSourceID] (ASP.NET) 或 [DataSource] (Windows Form) 屬性，再按下拉箭號，然後選取 [<新資料來源…>]。
在 [選擇資料來源類型] 頁面中，選取 [資料庫]，再按 [下一步]。
在 [選擇資料連接] 頁面中，按一下 [新增連接]。
在 [加入連接] 對話方塊中，確認 [資料來源] 欄位是否設定為 [Microsoft SQL Server (SqlClient)]，然後提供 AdventureWorks2008 資料庫的伺服器名稱和資料庫名稱。
按一下 [測試連接]，然後按 [確定]。
按 [下一步] 兩次。
在 [設定 Select 陳述式] 頁面中，選取 [指定自訂 SQL 陳述式]，然後按 [下一步]。

複製下列查詢並且貼到 [SQL 陳述式] 欄位中，然後按 [下一步]。

select LastName, SalesYTD, SalesLastYear 
  from HumanResources.Employee as e
  inner join Person.Person as p on e.BusinessEntityID = p.BusinessEntityID
  inner join Sales.SalesPerson as s on e.BusinessEntityID = s.BusinessEntityID

按一下 [測試查詢]，然後再按 [完成]。

SQL 資料來源現在已經用查詢中指定的資料行繫結到 Chart 控制項。

若要將資料繫結到圖表中的 X 和 Y 值

針對 Chart 控制項開啟 Series 集合編輯器。
在預設數列的 [屬性] 視窗中，按一下 [資料來源] 分類中的 [XValueMember] 屬性，再按下拉箭號，然後選取 [LastName]。

[XValueMember] 下拉式清單會顯示繫結到 Chart 控制項的資料來源傳回的所有資料行。
按一下 [YValueMembers] 屬性，再按下拉箭號，然後選取 [SalesYTD]。

預設數列的 X 值現在已繫結到 LastName 資料行，而預設數列的第一個 Y 值現在已繫結到 SalesYTD 資料行。
在 Series 集合編輯器中，按一下 [加入]，然後使用下列值對新數列執行同樣的動作：

屬性

值

XValueMember

LastName

YValueMembers

SalesLastYear
按一下 [確定]。
執行應用程式。

您現在可以看到兩個數列，顯示從資料來源自動填入的資料點。您可能也會注意到這個圖表並未顯示所有員工，這是因為 Chart 控制項會針對可讀性自動調整標籤。

屬性	值
XValueMember	LastName
YValueMembers	SalesLastYear

調整軸標籤和標題

請使用 ChartArea 集合編輯器中的 Axes 集合屬性來自訂圖表區域座標軸的標籤和標題。

若要調整軸標籤及加入標題

針對 Chart 控制項開啟 ChartArea 集合編輯器。
在預設圖表區域的 [屬性] 視窗中，按一下 [座標軸] 分類中的 [Axes] 集合屬性，然後按一下省略符號按鈕 (…)。Axis 集合編輯器便會開啟。

Axes 集合 (Axis 陣列) 含有圖表區域的座標軸。
在 (主要) X 軸的 [屬性] 視窗中，展開 [標籤] 分類中的 [LabelStyle] 屬性，將它的 [Interval] 屬性設定為 [1]，然後確認 [IntervalStyle] 屬性是否為未設定。

這樣會讓 Chart 控制項針對顯示的每一個資料點顯示標籤。
在 [標題] 分類中，將 [Title] 屬性設定為 [員工]。
在 (主要) Y 軸的 [屬性] 視窗中，將 [標題] 分類中的 [Title] 屬性設定為 [銷售]。
按兩次 [確定]。
執行應用程式。

Chart 控制項現在會在主要 X 軸上顯示每一位員工，並且自動以 90 度角方式排列。

為數列加入工具提示

現在要為兩個數加入工具提示用來區別資料點。

若要為數列加入工具提示

再次針對 Chart 控制項開啟 Series 集合編輯器。
選取第一個數列。
在第一個數列的 [屬性] 視窗中，將 [對應區域] 分類中的 [Tooltip] 屬性設定為 [#VALX: #VAL 今年銷售量。]。

請注意，如果按一下 [Tooltip] 屬性的值欄位中的省略按鈕，字串關鍵字編輯器便會開啟。這個編輯器可協助您用關鍵字建立工具提示字串。
在第一個數列的 [屬性] 視窗中，將 [對應區域] 分類中的 [Tooltip] 屬性設定為 [#VALX: #VAL 去年銷售量。]。
按一下 [確定]。
執行應用程式，然後讓游標停留在每個資料點上，即可查看它的工具提示。

下一個步驟

現在您已經了解如何從資料庫繫結資料，以及如何在圖表中使用工具提示和調整軸標籤。若要了解如何使用事件來自訂圖表，請參閱教學課程：使用事件來自訂圖表。

請參閱

共用方式為