ASP.NET WP - 圖表

在本章中，我們將介紹圖表輔助程式以及如何在圖表上顯示資料。在上一章中，我們在 WebGrid 輔助程式上顯示了資料。**圖表輔助程式**可用於以**圖形格式**顯示資料。

圖表輔助程式可以渲染一個影像，該影像以各種圖表型別顯示資料。
它還可以支援不同的格式和標籤選項。
它能夠渲染 30 多種圖表型別，您可能在 Microsoft Office 中見過，例如**面積圖、條形圖、柱形圖**等。
圖表顯示資料和其他元素，如**圖例、軸、序列**等。
您在圖表中顯示的資料可以來自陣列、資料庫返回的結果或 XML 檔案中的資料。

如何在圖表上顯示資料？

讓我們來看一個簡單的示例，我們將在此示例中在圖表上顯示資料。所以首先我們需要建立一個新的 CSHTML 檔案。

在名稱欄位中輸入**Charts.cshtml**，然後單擊“確定”，然後在 Charts.cshtml 檔案中替換以下程式碼。

@{
   var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks (%)")
   .AddSeries(
      name: "Student",
      xValue: new[] { "Allan", "Mark", "Ali", "Kerry", "Steve" },
      yValues: new[] { "79", "53", "73", "81", "43" })
   .Write();
}

如您在上面的程式碼中看到的，它首先將建立一個新圖表，並設定其寬度和高度。

var myChart = new Chart(width: 600, height: 400)

您可以使用**AddTitle**方法指定圖表標題，如下面的程式碼所示。

.AddTitle("Student Marks (%)")

**AddSeries**方法可用於新增資料，然後將值分配給 AddSeries 方法的 xValue 和 yValues 引數。name 引數顯示在圖表圖例中。

.AddSeries(
   name: "Student",
   xValue: new[] { "Allan", "Mark", "Ali", "Kerry", "Steve" },
   yValues: new[] { "79", "53", "73", "81", "43" })

xValue 引數包含一個數據陣列，這些資料將沿圖表的水平軸顯示，而 yValues 引數包含一個數據陣列，這些資料將用於繪製圖表的垂直點。

**Write 方法**實際上渲染了圖表。在這種情況下，因為您沒有指定圖表型別，所以圖表輔助程式渲染其預設圖表，即柱形圖。

現在讓我們執行您的應用程式並指定以下 URL - **https://:36905/charts**，您將看到以下網頁。

現在讓我們來看另一個示例，我們將使用資料庫查詢來檢索資料，然後將該資料顯示在圖表上。因此，首先我們需要向我們的資料庫新增另一個學生表，如下面的螢幕截圖所示。

現在讓我們向 Students 表中新增一些資料，如下面的螢幕截圖所示。

如您所見，現在我們有了學生資料。

現在要將此資料顯示在圖表上，讓我們建立一個新的 CSHTML 檔案。

在“名稱”欄位中輸入**ChartDataUsingDB.cshtml**，然後單擊“確定”，然後替換 ChartDataUsingDB.cshtml 檔案中的所有程式碼。

@{
   var db = Database.Open("WebPagesCustomers");
   var data = db.Query("SELECT FirstName, Marks FROM Students");
   var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks")
   .DataBindTable(dataSource: data, xField: "FirstName")
   .Write();
}

如您在上面的程式碼中看到的，它首先將開啟**WebPagesCustomers**資料庫，然後將其分配給名為 db 的變數。

var db = Database.Open("WebPagesCustomers");

接下來建立一個簡單的 SQL 查詢，該查詢將從 Students 表中檢索 FirstName 和 Marks。

var data = db.Query("SELECT FirstName, Marks FROM Students");

然後建立一個新圖表，並透過呼叫圖表的**DataBindTable**方法將資料庫查詢傳遞給它。

var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks")
   .DataBindTable(dataSource: data, xField: "FirstName")
   .Write();

此方法採用兩個引數

**dataSource**引數用於查詢中的資料。
**xField**引數允許您設定用於圖表 x 軸的資料列。

現在讓我們執行此應用程式並指定以下 URL - **https://:36905/ChartDataUsingDB**，您將看到以下網頁。

您可以使用 AddSeries 方法代替 DataBindTable，並且您還可以在 AddSeries 方法中指定圖表型別引數，如下面的程式碼所示。

@{
   var db = Database.Open("WebPagesCustomers");
   var data = db.Query("SELECT FirstName, Marks FROM Students");
   var myChart = new Chart(width: 600, height: 400)
      .AddTitle("Student Marks")
      .AddSeries("Default", chartType: "Pie",
      xValue: data, xField: "FirstName",
      yValues: data, yFields: "Marks")
      .Write();
}

現在讓我們再次執行應用程式並指定以下 URL - **https://:36905/ChartDataUsingDB**，您將看到以下網頁。

您還可以透過在建立圖表時簡單地指定主題引數來更改圖表的主題，如下面的程式碼中所述。

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)

現在讓我們再次執行此應用程式並指定以下 URL - **https://:36905/ChartDataUsingDB**，您將看到以下網頁。

列印頁面