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.
Người 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 bằng cách sử dụng "Trình trợ giúp biểu đồ".
"Trình trợ giúp biểu đồ" có thể tạo các loại hình ảnh biểu đồ 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 biệt 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ụ bên dưới hiển thị mã cần thiết để hiển thị biểu đồ từ một mảng giá trị:
Ví 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();
}
Chạy ví dụ »- Biểu đồ mới tạo một đối tượng biểu đồ mới và thiết lập 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 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 rồi sử dụng dữ liệu từ kết quả để tạo biểu đồ:
Ví 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();
}
Chạy ví dụ »- 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 truy vấn cơ sở dữ liệu và lưu kết quả vào dbdata
- Biểu đồ mới tạo một đối tượng mới cho biểu đồ và thiết lập 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 cách khá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:
Ví 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();
}
Chạy ví dụ »Biểu đồ từ dữ liệu XML
Tùy chọn thứ ba cho biểu đồ là sử dụng tệp XML làm dữ liệu cho biểu đồ:Ví 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();}
}
Chạy ví dụ »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. |