Asp.NET MVC Chart Kontrolü Tam Sayfa Sıkıntısı

Asp.NET MVC projelerinde istatistiksel verileri kolayca bir şekilde grafiksel raporlar halinde sunmamızı sağlayan Chart kontrolü hakkında tam sayfa sıkıntısı doğmaktadır.Asp.NET MVC 4.0 Chart Nesnesi başlıklı yazımda Chart kontrolü nedir, nasıl kullanılır teferruatıyla irdelemiştik.Lakin bu yazımızın içeriği bu kontrolü kullanmaya çalıştığımızda ilgili alandan ziyade sadece Chart kontrolüyle sayfayı tam ekran olarak kapsama sıkıntısını nasıl çözeceğimizi konuşacağız.

<div>
    Grafik
</div>

<div style="width:500px;height:500px;">
    @{
        var GrafikCiz = new Chart(500, 500);
        GrafikCiz.AddTitle("Gençay Yıldız Grafik").AddLegend("Gençay Yıldız").AddSeries("Değerler", xValue: new[] { "Ahmet", "Necati", "Mustafa", "Gençay" }, yValues: new[] { "4", "6", "1", "23" }).Write();
    }
</div>

Yukarıdaki kod yapısını ele alırsak eğer, Chart kontrolü oluşturulduğu esnada ilgili div içerisinde oluşturulmasını istediğimiz halde derleyip çalıştırdığımızda aşağıdaki gibi tüm sayfayı kaplar halde bulmaktayız.
Asp.NET MVC Chart Kontrolü Tam Sayfa Sıkıntısı

Write komutuyla Chart nesnesini sayfamıza bastığımız anda ilgili alana basma işlemini gerçekleştirememesinin sebebi ilgili sayfanın ContentType özelliğini jpeg formatına çevirmesinden kaynaklanmaktadır.Bu sebepten tüm sayfa bir image özelliğine sahip olduğu için sadece Chart nesnesi basılmaktadır.

Bu işlemi atlatabilmek için Chart nesnesini Server tarafında oluşturup View katmanına göndermeli ve oluşturulup gönderilen bu nesneyi ilgili alana basmalıyız.

        public ActionResult GrafikOlustur()
        {
            var GrafikCiz = new Chart(500, 500);
            GrafikCiz.AddTitle("Gençay Yıldız Grafik").AddLegend("Gençay Yıldız").AddSeries("Değerler", xValue: new[] { "Ahmet", "Necati", "Mustafa", "Gençay" }, yValues: new[] { "4", "6", "1", "23" }).Write();

            return File(GrafikCiz.ToWebImage().GetBytes(), "image/jpeg");
        }

Yukarıdaki kod bloğunu incelerseniz eğer Chart nesnesinin Controller’da(yani serverda) üretildiğini göreceksiniz.Nihayetinde grafiksel bir yapıda olan bu nesneyi jpeg formatında elde edeceğimizden dolayı geriye File metodu ile bir image formatına çevirip gönderiyoruz.

Bundan sonra yapmamız gereken işlem bu gelen image nesnesini sayfamızda ilgili alana basmak.

<div>
    Grafik
</div>

<div style="width:500px;height:500px;">
    <img src="@Url.Action("GrafikOlustur","Home")" />
</div>

Yukarıdaki kod bloğunu incelerseniz eğer “Home(Controller).cs” isimli Controller sınıfımızdaki “GrafikOlustur” isimli Action metodundaki grafiği oluşturacak metot link olarak belirtilmiştir.Yukarıda da belirttiğim gibi bu “GrafikOlustur” isimli Action metodumuz geriye döndüğü nesne bir image nesnesi olacağı için bu nesneyi direkt link olarak belirtebiliyoruz.

Asp.NET MVC Chart Kontrolü Tam Sayfa Sıkıntısı - 2

Gördüğünüz gibi Chart kontrolü istediğimiz div elemanının içerisine basılmıştır.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*