ASP.NET Web Sayfaları - Grafik Yardımcısı
Grafik Yardımcısı - Birçok kullanışlı ASP.NET Web Yardımcısından biri.
Grafik Yardımcısı
Önceki bölümlerde, bir ASP.NET "Helper"ın nasıl kullanılacağını öğrendiniz.
"WebGrid Yardımcısı"nı kullanarak verileri bir kılavuzda nasıl görüntüleyeceğinizi öğrendiniz.
Bu bölüm, "Grafik Yardımcısı" kullanılarak verilerin grafik biçiminde nasıl görüntüleneceğini açıklar.
"Grafik Yardımcısı", birçok biçimlendirme seçeneği ve etiketi ile farklı türlerde grafik görüntüleri oluşturabilir. Alan çizelgeleri, çubuk grafikler, sütun çizelgeleri, çizgi çizelgeleri ve pasta çizelgeleri gibi standart çizelgelerin yanı sıra hisse senedi çizelgeleri gibi daha özel çizelgeler oluşturabilir.
Bir grafikte görüntülediğiniz veriler bir diziden, bir veritabanından veya bir dosyadaki verilerden olabilir.
Bir Diziden Grafik
Aşağıdaki örnek, bir dizi değerden bir grafiği görüntülemek için gereken kodu gösterir:
Örnek
@{
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();
}
- yeni Grafik , yeni bir grafik nesnesi oluşturur ve genişliğini ve yüksekliğini ayarlar
- AddTitle yöntemi, grafik başlığını belirtir
- AddSeries yöntemi, grafiğe veri ekler
- chartType parametresi, grafiğin türünü tanımlar
- xValue parametresi, x ekseni adlarını tanımlar
- yValues parametresi, y ekseni değerlerini tanımlar
- Write() yöntemi grafiği görüntüler
Veritabanı Verilerinden Grafik
Bir veritabanı sorgusu çalıştırabilir ve ardından bir grafik oluşturmak için sonuçlardan gelen verileri kullanabilirsiniz:
Örnek
@{
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 veritabanını açar (ve veritabanı nesnesini db değişkenine atar)
- var dbdata = db.Query bir veritabanı sorgusu çalıştırır ve sonucu dbdata'da saklar
- yeni Grafik bir grafik yeni nesne oluşturur ve genişliğini ve yüksekliğini ayarlar
- AddTitle yöntemi, grafik başlığını belirtir
- DataBindTable yöntemi, veri kaynağını grafiğe bağlar
- Write() yöntemi grafiği görüntüler
DataBindTable yöntemini kullanmaya bir alternatif, AddSeries kullanmaktır (Önceki örneğe bakın). DataBindTable'ın kullanımı daha kolaydır, ancak grafiği ve verileri daha açık bir şekilde belirtebildiğiniz için AddSeries daha esnektir:
Örnek
@{
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();
}
XML Verilerinden Grafik
Grafik oluşturmak için üçüncü seçenek, grafik için veri olarak bir XML dosyası kullanmaktır:
Örnek
@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();}
}
Grafik Nesne Referansı
| 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. |