En son web geliştirme öğreticiler
 

ASP.NET Web Sayfaları - Grafik Yardımcısı


Grafik Yardımcısı - birçok yararlı ASP.NET Web Yardımcıları biri.


Grafik Yardımcısı

Önceki bölümlerde, bir ASP.NET kullanmayı öğreniyor "Helper" .

Sen kullanarak bir ızgara verileri görüntülemek öğrendim "WebGrid Helper" .

Bu bölüm kullanılarak grafiksel biçimde veri görüntülemek açıklar "Chart Helper" .

"Chart Helper" birçok biçimlendirme seçenekleri ve etiketler ile farklı türde grafik görüntülerini oluşturabilir. Bu hisse senedi grafikleri gibi daha özelleşmiş çizelgeleri yanı sıra çevredeki grafikler, çubuk grafikler, sütun grafiklerin, çizgi grafikleri ve pasta grafikleri gibi standart grafikler oluşturabilirsiniz.

grafikgrafik

Bir grafik olarak veri bir diziden, bir veri tabanından veya bir dosya içerisinde verileri arasında olabilir.


Bir Dizisinden Grafik

Aşağıdaki örnek değerler dizisi bir grafik görüntülemek için gerekli alınmıştır:

Ö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();
}
»Run örnek

- new Chart yeni bir grafik nesnesi oluşturur ve genişliğini ve yüksekliğini ayarlar

- AddTitle yöntem grafik başlığını belirler

- AddSeries yöntem grafik veri ekler

- chartType parametre grafik türünü tanımlar

- xValue parametresi x ekseni adları tanımlar

- yValues parametre y-ekseni değerlerini tanımlar

- Write() metodu grafik görüntüler


Veritabanı Verilerden Grafik

Bir grafik oluşturmak için sonuçlardan verileri kullanmak sonra bir veritabanı sorgusu çalıştırabilir ve:

Ö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();
}
»Run örnek

- var db = Database.Open veritabanını açar (ve değişken db veritabanı nesne atar)

- var dbdata = db.Query bir veritabanı sorgusu çalışır ve dbdata sonucu saklar

- new Chart bir grafik yeni bir nesne oluşturur ve genişliğini ve yüksekliğini ayarlar

- AddTitle yöntem grafik başlığını belirler

- DataBindTable yöntem grafik veri kaynağı bağlanan

- Write() metodu grafik görüntüler

DataBindTable yöntem kullanılarak bir alternatif AddSeries (önceki örneğe bakın) kullanmaktır. DataBindTable kullanımı daha kolay, ancak daha açık grafiği ve verileri belirtebilirsiniz çünkü 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();
}
»Run örnek

XML Verilerden Grafik

grafiğini Üçü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();}
}
»Run örnek