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

Chart - Çok sayıda yararlı ASP.NET Web yardımcısından biri.

Chart Helper

Önceki bölümde, ASP.NET "yardımcısı" kullanarak nasıl çalıştığınızı öğrendiniz.

Şimdiye kadar "WebGrid Yardımcısı" kullanarak verileri gridde nasıl gösterdiğinizi öğrendiniz.

Bu bölüm, "Chart Yardımcısı" kullanılarak verileri grafikte nasıl gösterdiğinizi anlatmaktadır.

"Chart Yardımcısı", çeşitli formatlar ve işaretlerle farklı türdeki grafik resimlerini oluşturabilir. Standart grafikler (örneğin, alan grafikleri, çubuk grafikleri, sütun grafikleri, çizgi grafikleri ve pasta grafikleri) ve daha profesyonel grafikler (örneğin, hisse senedi grafikleri) gibi standart grafikleri ve daha profesyonel grafikleri oluşturabilir.

Grafikte gösterilen veriler diziden, veritabanından veya dosyalardan gelen veriler olabilir.

Diziden gelen grafik

Aşağıdaki örnekte gösterilen kod, diziden gelen verileri kullanarak grafik 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();
}

Örnek Çalıştır

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

AddTitle metodu grafik başlığını belirler.

AddSeries metodu verileri grafige ekler.

chartType parametresi grafik türünü tanımlar.

xValue parametresi x ekseni değerlerini tanımlar.

yValues parametresi y ekseni değerlerini tanımlar.

Write() metodu grafikleri gösterir.

Veritabanından gelen grafik

Öncelikle bir veritabanı sorgusu çalıştırabilir ve ardından sonuçlardaki verileri kullanarak grafik oluşturabilirsiniz:

Örnek

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Ürün Satışları") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Örnek Çalıştır

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

var dbdata = db.Query veritabanı sorgusunu çalıştırır ve sonuçları dbdata'ya kaydeder.

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

AddTitle metodu grafik başlığını belirler.

DataBindTable metodu veri kaynağını grafikle bağlar.

Write() metodu grafikleri gösterir.

DataBindTable yönteminin alternatifi, AddSeries'yi kullanmaktır (önceki örneğe bakın). DataBindTable daha kolay kullanılır, ancak AddSeries daha esnek, çünkü daha doğru bir şekilde grafik ve veri belirleyebilir:

Örnek

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Ürün Satışları") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Örnek Çalıştır

XML verisinden gelen grafik

Grafik oluşturmanın üçüncü seçeneği, grafik verisini XML dosyası olarak 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("Çalışan Başına Satışlar")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Örnek Çalıştır