|
Takvim |
| | Pzt | Sal | Çar | Per | Cum | Cmt | Paz |
|---|
| 22 | 23 | 24 | 25 | 26 | 27 | 28 | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | | 8 | 9 | 10 | 11 | 12 | 13 | 14 | | 15 | 16 | 17 | 18 | 19 | 20 | 21 | | 22 | 23 | 24 | 25 | 26 | 27 | 28 | | 29 | 30 | 31 | 1 | 2 | 3 | 4 |
|
|
|
Login with Facebook
|
|
Microsoft Chart Control |
|
|
Bu makalemde sizlere .Net Framework 3.5 ile çalışan “Microsoft Chart Control” ‘den söz edeceğim. Pie, area, range, point, circular, accumulation, data distribution, ajax interactive, doughnut gibi görünümlere sahip, üstelik piyasadaki chart controllerine nazaran oldukça performanslı ve tamamen ücretsiz bir component. Ayrıca hem ASP.Net platformunda hem de Windows Application uygulamalarında kullanabiliyoruz.
· 2D ve 3D görüntüler,
· Çoklu grafik alanları, çizelgeler ve başlıklar,
· Yüksek ölçüde özelleştirilebilir görüntüler,
· Veri bağlamları, formüller, açıklamalar,
· Akıllı etiket yerleşimi,
Yukarıdaki bilgiler ürün bloğundan alınmıştır.
Projelerimizde bu kontrolü kullanmamız için öncelikle bir dll paketini indirmemiz gerekiyor. Bu kurulum içerisinde hem ASP.Net hem de Windows Form dosyaları mevcut. Ayrıca aşağıda diğer faydalı dosyaların linkleri de belirtilmiştir.
Microsoft Chart Control dll ‘lerini indirmek için tıklayın.
Visual Studio 2008 Add-on indirmek için tıklayın.
Örnek projeler için tıklayın.
Dokümantasyon dosyası için tıklayın.
Gelelim projelerimize chart controlünü eklemeye, mevcut dll paketini ve ToolBox Add-on yüklediysek ToolBox da Data tabında Chart controlünü görebilirsiniz.
<asp:Chart ID="Chart1" runat="server" />
Öncelikle oluşturacağımız chartlarda kullanacağımız bir veritabanı oluşturalım (ör. Şehirlerin nüfus bilgileri). Sql tabloları hariç kendi nesnelerimizi, string ya da int dizeleri de bağlayabiliriz.
 
Chart controlümüze verilerin bağlanması için Series ve ChartArea bölümlerine ihtiyacımız var. Series verilerimiz, ChartArea ise verilerin görüntülenmesi için kullandığımız alandır. Ancak bizim yapacağımız örneklerde code behind kısmından manuel olarak ekleme işlemlerini gerçekleştireceğiz. Html kullanımı aşağıdaki gibidir.
<series>
<asp:Series Name="Series1">
</asp:Series>
</series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
Page_Load eventında chart controlümüze önce bir veri bağlama işlemi gerçekleştireceğiz, daha sonra bağladığımız verilerin ve controlün görünümünü değiştireceğiz.
|
Chart Controlüne Sql Verisi Bağlama |
|
using System.Web.UI.DataVisualization.Charting
//Öncelikle sql bağlantı cümlemizi ve aktarılacak olan tablomuzun sorgusunu hazırlıyoruz
SqlConnection con = new SqlConnection("Server=Q6600;Database=Chart;Trusted_Connection=True;");
SqlCommand com = new SqlCommand("Select Sehir, Nufus From Sehirler", con);
//Chart kontrolünün kullanacağı chart alanını oluşturup, Chart kontrolüne ekliyoruz
ChartArea chartArea = new ChartArea("chartArea");
Chart1.ChartAreas.Add(chartArea);
//Seri ismini belirtiyoruz
Series series = new Series("Şehirler");
//Serinin hangi alanı kullanacağını belirtiyoruz
series.ChartArea = "chartArea";
//Seride kullanılacak olan yataydaki kolon ismini belirtiyoruz
series.XValueMember = "Sehir";
//Seride kullanılacak olan yataydaki kolon tipini belirtiyoruz
series.XValueType = ChartValueType.String;
//Aynı şekilde dikeyde kullanılacak olan değerlerin özelliklerini belirtiyoruz
series.YValueMembers = "Nufus";
series.YValueType = ChartValueType.Int32;
//Chartın kullanacağı series nesnesini tipini belirtip, chart controle ekliyoruz
series.ChartType = SeriesChartType.Pie;
Chart1.Series.Add(series);
//Chartın kullanacağı Data nesnesini belirtip, bind işlemini gerçekleştiriyoruz
Chart1.DataSource = com;
Chart1.DataBind();
|
|
Kodlarımızı çalıştırdığımızda yukarıdaki gibi bir görünüme sahip olacağız. Bu görünüm tabiki en basit haliyle bize sunulan şekli, bunu görünümü güzelleştirmek için aşağıdaki kodları kullanabiliriz.
|
|
//PieDrawingStyle ile chart kenar görünümünü değiştirebiliyoruz
//Concave ile dolgunluk, SoftEdge ile yumuşaklık kazandırabiliriz
series["PieDrawingStyle"] = "Concave";
//Area3DStyle.Enable3D ile chartı 3d görünümüne çevirebiliriz.
chartArea.Area3DStyle.Enable3D = false;
//Palette ile değer renklerini değiştirebiliyoruz
Chart1.Palette = ChartColorPalette.BrightPastel;
//PieLabelStyle ile chart içerisinde değerlerin başlıklarının görünüp görünmemesini
//ayarlayabilirsiniz. Özellikle uzun başlıklarda kapatmanız işinize yarayacaktır.
series["PieLabelStyle"] = "Disabled";
//PieLabelStyle = Disabled ise sadece renkler karşımıza çıkacaktır.
//Görünümü bu şekilde istemiyorsanız controlümüze birde legand nesnesi eklemeliyiz.
Legend legend = new Legend("legend");
//Legend 'ın görünmesini istiyorsak Enabled = true olarak belirtmeliyiz.
legend.Enabled = true;
//Background rengi vermek için BackColor kullanabiliriz.
legend.BackColor = Color.WhiteSmoke;
//Ortalamak için Alignment ve Docking kullanabiliriz.
legend.Alignment = StringAlignment.Center;
legend.Docking = Docking.Bottom;
//Başlık görünümleri için LegendStyle kullanabiliriz.
legend.LegendStyle = LegendStyle.Row;
//ve tabiki tüm bu özellikleri chartın kullanabilmesi için eklememiz gerekiyor
Chart1.Legends.Add(legend);
//Chart başlığı için Titles nesnesini kullanabiliriz.
//Bu bölümdede hizalama, font, renk, gölge gibi birçok özellik kullanılabilir.
Title title = new Title();
title.Text = "İllerin Nüfus Dağılımı";
title.ForeColor = Color.Navy;
title.Docking = Docking.Top;
title.Alignment = ContentAlignment.TopCenter;
title.Font = new Font("Tahoma", 12, FontStyle.Bold);
title.ShadowColor = Color.Gray;
title.ShadowOffset = 2;
Chart1.Titles.Add(title);
|
|
|
“Microsoft Chart Control” piyasadaki birçok Chart controlünden daha fazla özelliğe sahip ve tamamen ücretsiz. Yukarıda vermiş olduğum örnek projeler içerisinde tüm ChartTyplara uygun örnekler mevcut, ayırca dokümantasyon dosyasında da tüm sorularınızın cevaplarını bulabilirsiniz.
Başka bir makalemde görüşmek dileğiyle...
Gökhan BAĞCI
gokhanbagci.com |
|
|
|
Eklenme Tarihi: 10.12.2008 13:43:00
|
|