教學課程:將圖表資料繫結至資料庫 (Chart 控制項)

Visual Studio 2010

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

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

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

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

  1. 在 Windows Form 或 Web 應用程式的設計介面中,從 [工具箱] 拖放 Chart 控制項:

  2. 在 Chart 控制項的 [屬性] 視窗中,按一下 [資料] 分類中的 [DataSourceID] (ASP.NET) 或 [DataSource] (Windows Form) 屬性,再按下拉箭號,然後選取 [<新資料來源…>]。

  3. 在 [選擇資料來源類型] 頁面中,選取 [資料庫],再按 [下一步]。

  4. 在 [選擇資料連接] 頁面中,按一下 [新增連接]。

  5. 在 [加入連接] 對話方塊中,確認 [資料來源] 欄位是否設定為 [Microsoft SQL Server (SqlClient)],然後提供 AdventureWorks2008 資料庫的伺服器名稱和資料庫名稱。

  6. 按一下 [測試連接],然後按 [確定]。

  7. 按 [下一步] 兩次。

  8. 在 [設定 Select 陳述式] 頁面中,選取 [指定自訂 SQL 陳述式],然後按 [下一步]。

  9. 複製下列查詢並且貼到 [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
  10. 按一下 [測試查詢],然後再按 [完成]。

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

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

  1. 針對 Chart 控制項開啟 Series 集合編輯器。

  2. 在預設數列的 [屬性] 視窗中,按一下 [資料來源] 分類中的 [XValueMember] 屬性,再按下拉箭號,然後選取 [LastName]。

    [XValueMember] 下拉式清單會顯示繫結到 Chart 控制項的資料來源傳回的所有資料行。

  3. 按一下 [YValueMembers] 屬性,再按下拉箭號,然後選取 [SalesYTD]。

    預設數列的 X 值現在已繫結到 LastName 資料行,而預設數列的第一個 Y 值現在已繫結到 SalesYTD 資料行。

  4. 在 Series 集合編輯器中,按一下 [加入],然後使用下列值對新數列執行同樣的動作:

    屬性

    XValueMember

    LastName

    YValueMembers

    SalesLastYear

  5. 按一下 [確定]。

  6. 執行應用程式。

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

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

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

  1. 針對 Chart 控制項開啟 ChartArea 集合編輯器。

  2. 在預設圖表區域的 [屬性] 視窗中,按一下 [座標軸] 分類中的 [Axes] 集合屬性,然後按一下省略符號按鈕 ()。Axis 集合編輯器便會開啟。

    Axes 集合 (Axis 陣列) 含有圖表區域的座標軸

  3. 在 (主要) X 軸的 [屬性] 視窗中,展開 [標籤] 分類中的 [LabelStyle] 屬性,將它的 [Interval] 屬性設定為 [1],然後確認 [IntervalStyle] 屬性是否為未設定。

    這樣會讓 Chart 控制項針對顯示的每一個資料點顯示標籤。

  4. 在 [標題] 分類中,將 [Title] 屬性設定為 [員工]。

  5. 在 (主要) Y 軸的 [屬性] 視窗中,將 [標題] 分類中的 [Title] 屬性設定為 [銷售]。

  6. 按兩次 [確定]。

  7. 執行應用程式。

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

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

若要為數列加入工具提示

  1. 再次針對 Chart 控制項開啟 Series 集合編輯器。

  2. 選取第一個數列。

  3. 在第一個數列的 [屬性] 視窗中,將 [對應區域] 分類中的 [Tooltip] 屬性設定為 [#VALX: #VAL今年銷售量。]。

    請注意,如果按一下 [Tooltip] 屬性的值欄位中的省略按鈕,字串關鍵字編輯器便會開啟。這個編輯器可協助您用關鍵字建立工具提示字串。

  4. 在第一個數列的 [屬性] 視窗中,將 [對應區域] 分類中的 [Tooltip] 屬性設定為 [#VALX: #VAL去年銷售量。]。

  5. 按一下 [確定]。

  6. 執行應用程式,然後讓游標停留在每個資料點上,即可查看它的工具提示。

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

阿倫 發表在 痞客邦 PIXNET 留言(0) 人氣()