Trang Web ASP.NET - Trình trợ giúp Biểu đồ
Trình trợ giúp Biểu đồ - Một trong nhiều Trình trợ giúp Web ASP.NET hữu ích.
Trình trợ giúp Biểu đồ
Trong các chương trước, bạn đã học cách sử dụng "Trình trợ giúp" ASP.NET.
Bạn đã học cách hiển thị dữ liệu trong lưới bằng cách sử dụng "Trình trợ giúp WebGrid".
Chương này giải thích cách hiển thị dữ liệu ở dạng đồ họa, sử dụng "Trình trợ giúp biểu đồ".
"Trình trợ giúp biểu đồ" có thể tạo hình ảnh biểu đồ thuộc nhiều loại khác nhau với nhiều tùy chọn định dạng và nhãn. Nó có thể tạo các biểu đồ tiêu chuẩn như biểu đồ vùng, biểu đồ thanh, biểu đồ cột, biểu đồ đường và biểu đồ hình tròn, cùng với các biểu đồ chuyên dụng hơn như biểu đồ chứng khoán.
Dữ liệu bạn hiển thị trong biểu đồ có thể từ một mảng, từ cơ sở dữ liệu hoặc từ dữ liệu trong tệp.
Biểu đồ từ một mảng
Ví dụ dưới đây cho thấy mã cần thiết để hiển thị biểu đồ từ một mảng giá trị:
Thí dụ
@{
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();
}
- Biểu đồ mới tạo một đối tượng biểu đồ mới và đặt chiều rộng và chiều cao của nó
- phương thức AddTitle chỉ định tiêu đề biểu đồ
- phương pháp AddSeries thêm dữ liệu vào biểu đồ
- tham số chartType xác định loại biểu đồ
- tham số xValue xác định tên trục x
- tham số yValues xác định các giá trị trục y
- phương thức Write () hiển thị biểu đồ
Biểu đồ từ dữ liệu cơ sở dữ liệu
Bạn có thể chạy truy vấn cơ sở dữ liệu và sau đó sử dụng dữ liệu từ kết quả để tạo biểu đồ:
Thí dụ
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
}
- var db = Database.Open mở cơ sở dữ liệu (và gán đối tượng cơ sở dữ liệu cho biến db)
- var dbdata = db.Query chạy một truy vấn cơ sở dữ liệu và lưu trữ kết quả trong dbdata
- Biểu đồ mới tạo một biểu đồ đối tượng mới và đặt chiều rộng và chiều cao của nó
- phương thức AddTitle chỉ định tiêu đề biểu đồ
- phương thức DataBindTable liên kết nguồn dữ liệu với biểu đồ
- phương thức Write () hiển thị biểu đồ
Một thay thế cho việc sử dụng 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ì bạn có thể chỉ định biểu đồ và dữ liệu rõ ràng hơn:
Thí dụ
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.AddSeries(chartType:"Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
}
Biểu đồ từ dữ liệu XML
Tùy chọn thứ ba để lập biểu đồ là sử dụng tệp XML làm dữ liệu cho biểu đồ:
Thí dụ
@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("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}
Tham chiếu đối tượng biểu đồ
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |