ASP.NET Web Pages - Chart Helper

Chart - Một trong nhiều Helper hữu ích của ASP.NET Web.

Chart Helper

Trong chương trước, bạn đã học cách sử dụng một “Helper” của ASP.NET.

Bạn đã học cách hiển thị dữ liệu trong lưới bằng cách sử dụng “WebGrid Helper”.

Chương này giải thích cách hiển thị dữ liệu trong biểu đồ bằng cách sử dụng “Chart Helper”.

“Chart Helper” có thể tạo nhiều loại hình ảnh biểu đồ khác nhau thông qua nhiều định dạng và thẻ. Nó có thể tạo biểu đồ tiêu chuẩn như biểu đồ diện tích, biểu đồ thanh, biểu đồ cột, biểu đồ đường và biểu đồ tròn, cũng như biểu đồ chuyên nghiệp hơn (như biểu đồ xu hướng cổ phiếu).

Dữ liệu hiển thị trong biểu đồ có thể là dữ liệu từ mảng, cơ sở dữ liệu hoặc tệp.

Biểu đồ từ mảng

Ví dụ sau đây hiển thị mã sử dụng dữ liệu từ mảng để hiển thị biểu đồ:

Mẫu

@{ 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Employees") 
   .AddSeries(chartType: "column",
      xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
      yValues: new[] { "2", "6", "4", "5", "3" }) 
   .Write();
}

Chạy mẫu

new Chart Tạo đối tượng biểu đồ mới và thiết lập chiều rộng và chiều cao của nó.

AddTitle Phương pháp quy định tiêu đề của biểu đồ.

AddSeries Phương pháp thêm dữ liệu vào biểu đồ.

chartType Parameter định nghĩa loại biểu đồ.

xValue Parameter định nghĩa giá trị trục x.

yValues Parameter định nghĩa giá trị trục y.

Write() Phương pháp hiển thị biểu đồ.

Biểu đồ từ cơ sở dữ liệu

Bạn có thể chạy một truy vấn cơ sở dữ liệu trước, sau đó sử dụng dữ liệu trong kết quả để tạo biểu đồ:

Mẫu

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Doanh thu sản phẩm") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Chạy mẫu

var db = Database.Open Mở cơ sở dữ liệu (và gán đối tượng cơ sở dữ liệu vào biến db).

var dbdata = db.Query Chạy truy vấn cơ sở dữ liệu và lưu kết quả vào dbdata.

new Chart Tạo đối tượng biểu đồ mới và thiết lập chiều rộng và chiều cao của nó.

AddTitle Phương pháp quy định tiêu đề của biểu đồ.

DataBindTable Phương pháp gắn nguồn dữ liệu vào biểu đồ.

Write() Phương pháp hiển thị biểu đồ.

Giải pháp thay thế cho phương pháp DataBindTable là sử dụng AddSeries (xem ví dụ trước). DataBindTable dễ sử dụng hơn, nhưng AddSeries linh hoạt hơn vì nó có thể quy định chính xác hơn biểu đồ và dữ liệu:

Mẫu

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Doanh thu sản phẩm") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Chạy mẫu

Biểu đồ từ dữ liệu XML

Tùy chọn thứ ba để tạo biểu đồ là sử dụng tệp XML làm dữ liệu cho biểu đồ:

Mẫu

@using System.Data;
@{
var dataSet = new DataSet()
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"))
dataSet.ReadXml(Server.MapPath("data.xml"))
var dataView = new DataView(dataSet.Tables[0])
var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Doanh thu theo nhân viên")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Chạy mẫu