Merhaba, bu yazıda sizlere C# ile Devexpress Chart Control – Pie Chart Kullanımı hakkında bilgi vereceğim.
Özellikle ticari yazılımlarla sıkça karşılaştığımız Chart Control companentinin Devexpress ile nasıl kullanılacağını anlatacağım. Bu Chart Control’u kullanmak için Devexpress sisteminizde yüklü olmalıdır. Ben bunu anlatırken yüklü varsayarak bahsedeceğim. Bugün Chart Control türü olan Pie Chart yani pasta dilimi şeklinde olan hakkında bilgi vereceğim.
Pie Chart Nerede İşimize Yarar ?
Daha çok ticari yazılımlarda raporlama bölümünde sıkça kullanılmaktadır. Ben size ufak bir örnek ile anlatacağım ama siz bunu daha da geliştirebilirsiniz. Örneğin bir firmanın kasa gelirlerinin yüzdesel olarak gösterilmesi gibi ne kadar nakit alınmış ne kadar kredi kartı alınmış veya kasiyer bazlı X kasiyeri ne kadar almış, Y kasiyeri ne kadar almış gibi değişik değişik isteğe göre dizayn edilebilir.
Şimdi yavaş yavaş projemizin nasıl yapılacağına geçmek istiyorum. İlk önce gerekli DLL’leri sistemimize eklememiz gerekiyor. Bu DLL leri otomatik olarak sisteme eklemek için Chart Control compenentini formunuza ekleyin daha sonra silin otomatik olarak ekleyecektir. Biz anlatımımızda dinamik olarak oluşturmayı yaptığımız için otomatik olarak eklememektedir.
1 2 3 4 5 6 7 8 9 | DevExpress.Charts.v15.1.Core DevExpress.Data.v15.1 DevExpress.Utils.v15.1 DevExpress.XtraBars.v15.1 DevExpress.XtraCharts.v15.1 DevExpress.XtraCharts.v15.1.UI DevExpress.XtraCharts.v15.1.Wizard DevExpress.XtraEditors.v15.1 DevExpress.XtraPrinting.v15.1 |
Daha sonra Using Namespace’sine aşağıdaki kodu ekliyoruz.
1 | using DevExpress.XtraCharts; |
Aşağıdaki kodda dinamik olarak chart control nesnesi oluşturuyoruz.
1 | ChartControl pieChart = new ChartControl(); |
Daha sonra Series oluşturuyoruz. Bu grafikteki değerlerimizin tutulacağı bir nesnedir. Series’ın birinci değeri adı, ikince değeri ise tipi konumuz Pie Chart olduğu için tipini Pie olarak seçtik.
1 | Series series1 = new Series("Pie Chart", ViewType.Pie); |
Series’e değerleri eklemeye geldi sıra ben random bir değer oluşturdum her defasında ancak siz Database’den de verileri çekebilirsiniz. Series’in birinci değeri adı, ikinci değeri ise sayı olarak girdim. Değeri de random bir değer olarak atadım.
1 2 3 4 5 6 | Random r = new Random(); for (int i = 1; i <= 12; i++) { series1.Points.Add(new SeriesPoint(i, r.Next(1,100))); } |
Bundan sonra yapacağımız işlem Seriesleri chartımıza eklemek olacak.
1 | pieChart.Series.Add(series1); |
Seriesimizin label text’inin nasıl görüneceğini ayarlıyoruz. Ben burada “A” yani series de tanımladığımız isim bölümü gözüksün daha sonra “V:c2” olarak değerimiz para formatında olsun. Daha sonra gelen “VP:p2” değerimizin diğer değerlere göre yüzdesel olarak gözükmesini ayarlardım. Siz farklı text tanımlamaları yapabilirsiniz.
1 | series1.Label.TextPattern = "{A}: {V:c2}: {VP:p2}"; |
Label pozisyonunu ayarladığımız bölümdür. Ben burada TwoColumns olarak seçtim. Siz bunları değiştirerek kendinize uygun olanı kullanabilirsiniz.
1 | ((PieSeriesLabel)series1.Label).Position = PieSeriesLabelPosition.TwoColumns; |
Bu bölümdeki kod blogumuz seri olarak label yani etiketlerin çakışmalarını algılamasını sağlıyoruz.
1 | ((PieSeriesLabel)series1.Label).ResolveOverlappingMode = ResolveOverlappingMode.Default; |
Chart’a başlık eklemek için ChartTitle nesnesi üretiyoruz.
1 | ChartTitle chartTitle1 = new ChartTitle(); |
Chartın başlığını belirliyoruz. Daha sonra WordWrap özelliği ile sözcüğü kaydırma özelliğini ‘True’ yapıyoruz. Daha sonra Chart’a title olarak ekliyoruz.
1 2 3 | chartTitle1.Text = "Pie Chart"; chartTitle1.WordWrap = true; pieChart.Titles.Add(chartTitle1); |
Series görünümü değiştirmek için nesnemizi oluşturuyoruz.
1 | PieSeriesView myView = (PieSeriesView)series1.View; |
Bu ayar eğer pasta dilimini ayrı ayrı görmek istiyorsak eklenebilir. Ben eklendiği ve eklenmediği durumda nasıl görüneceği ile ilgili resimleri aşağıya ekledim. Siz kendinize göre kullanabilirsiniz.
1 2 3 4 | myView.ExplodedPointsFilters.Add(new SeriesPointFilter(SeriesPointKey.Value_1, DataFilterCondition.GreaterThanOrEqual, 9)); myView.ExplodedPointsFilters.Add(new SeriesPointFilter(SeriesPointKey.Argument, DataFilterCondition.NotEqual, "Others")); |
Görünüm ile ilgili diğer ayarlar siz kendinize göre değiştirip kendinize uygun olan ayarı kullanabilirsiniz.
1 2 3 4 | myView.ExplodeMode = PieExplodeMode.UseFilters; myView.ExplodedDistancePercentage = 30; myView.RuntimeExploding = true; myView.HeightToWidthRatio = 0.75; |
Ben burada chart formu tamamen kaplaması için bu işlemi yaptım ancak siz istemezseniz yapmayabilirsiniz.
1 | pieChart.Dock = DockStyle.Fill; |
Chart Control ile işlemimiz bitti ben dinamik oluşturduğum için chartı forma eklemem gerekliyor. Sizde dinamik oluşturma yapıyorsanız. Onun içinde aşağıdaki kodu projenize eklemeniz gerekiyor
1 | this.Controls.Add(pieChart); |
Pasta Dilimi ayrı olmadığı durumun resmi
Pasta Dilimi ayrı olduğu durumun resmi
Bu yazımızda C# ile Devexpress Chart Control – Pie Chart Kullanımı hakkında bilgi vermeye çalıştım. Devexpress ile ilgili yazılarımız devam edecektir.
Soru ve görüşleriniz için [email protected] adresine mail atabilirsiniz.
