Grafik Çizim için Core Plot

Core Plot iOS ortamının yanı sıra Mac OS platformunda da kullanabileceğiniz, açık kaynak kodlu bir grafik çizim kütüphanesidir. Uygulamalarınızda her alan her türlü x - y grafiği, sütun dağılım, pasta dağılımı türünde çizim ihtiyaçlarınıza cevap veren Core Plot, 2 boyutlu her grafiği çizebilmektedir.

Projeyi yüklemek için yapmanız gereken, https://code.google.com/p/core-plot/ adresine giderek en son iOS uyumlu sürümü yüklemek olacaktır.

Dosyaların yüklenmesi tamamlandıktan sonra Binaries klasörü altında yer alan iOS klasöründe Core Plot'un iPhone ve iPad cihazları destekleyen sürümünü bulacaksınız.

Burada yapmanız gereken CorePlotHeaders klasörünü ve libCorePlot-CocoaTouch.a dosyanını kendi projenizin içerisine taşımak olacaktır. Daha sonra proje özelliklerine giderek Build Settings altında Other Linker Flags seçeneğine gelin. Core Plot'un doğru çalışması için burada -ObjC ve -all_load değerlerini girmeniz gerekmektedir.

Şimdi örnek bir x-y grafiği çizerek Core Plot'u biraz daha detaylı anlatacağız. İlk olarak Core Plot kütüphanesini projemize import ile ekleyelim ve grafik için kullanacağımız değişkenleri belirleyelim.

 

#import <UIKit/UIKit.h>
#import "CorePlot-CocoaTouch.h" @interface ViewController : UIViewController <CPTBarPlotDataSource,CPTBarPlotDelegate>
@property (nonatomic, retain) CPTGraphHostingView *chartView;
@property (nonatomic, retain) CPTXYGraph *graph;
@property (nonatomic, retain) NSMutableArray *dataForChart;
@end

 

Burada CPTGraphHostingView grafiğin yerleştirileceği alanı temsil eder ve UIView sınıfındandır. CPTXYGraph ise x-y ekseninde fonksiyonların çizimi için kullanılan grafik tipidir. dataForChart değişkeni ise grafikte yer alacak değişkenleri tutan dizidir. Bir sonraki adımda ise bu değişkenleri oluşturuyoruz.

 

dataForChart = [NSMutableArray new];
chartView = [[CPTGraphHostingView alloc] initWithFrame:self.view.frame];

[self.view addSubview:chartView];
graph = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
chartView.hostedGraph = graph;

 

Grafiğin tüm ekranı kaplaması için CPTGraphHostingView görselinin frame değeri içerisinde bulunduğu UIView ile aynı tutuldu. Daha sonra addSubview: metodu ile ekrana eklendi. Ardından hostedGraph seçeneği ile içine çizilecek grafik olarak x - y grafiğimiz işaret edildi.

 

CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)graph.defaultPlotSpace;
plotSpace.allowsUserInteraction = YES;
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0) length:CPTDecimalFromFloat(5.0)];
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0) length:CPTDecimalFromFloat(5.0)];
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)graph.axisSet;
CPTXYAxis *x= axisSet.xAxis;
x.majorIntervalLength= CPTDecimalFromString(@"1");
x.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");

CPTXYAxis *y = axisSet.yAxis;
y.majorIntervalLength = CPTDecimalFromString(@"1");
y.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
CPTScatterPlot *dataSourceLinePlot = [[CPTScatterPlot alloc] init];
dataSourceLinePlot.identifier = @"Plot";

dataSourceLinePlot.dataSource = self;

[graph addPlot:dataSourceLinePlot];

CPTMutableLineStyle *symbolLineStyle = [CPTMutableLineStyle lineStyle];
symbolLineStyle.lineColor = [CPTColor blackColor];

 

Bir sonraki tanımlamalarda ise çizeceğimiz grafikle ilgili eksen aralıklarını ve genişliklerini belirliyoruz. Kullanıcının grafiği dokunuşla kaydırabilmesi için allowsUserInteraction özelliğine YES değerini veriyoruz. Yukarıdaki ayarlar bize 0,0 eksenini ekranın sol alt köşesine getiren ve her 1 adımda x ve y eksenlerine değer yazan bir grafik çizdirecektir. CPTScatterPlot ise bize bir x - y grafiği çizmemizde yardımcı olur. Grafiği tanımlamamız bittikten sonra addPlot: metodu ile grafiği ekrana ekliyoruz. CPTMutableLineStyle ise grafikteki çizginin rengini belirleyen değerdir.

 

NSMutableArray *contentArray = [NSMutableArray arrayWithCapacity:10];
NSUInteger i;
for ( i = 0; i < 10; i++ ) {
id x = [NSNumber numberWithFloat:i - 5];
id y = [NSNumber numberWithFloat:i - 5];
[contentArray addObject:[NSMutableDictionary dictionaryWithObjectsAndKeys:x, @"x", y, @"y", nil]];
}
[dataForChart addObjectsFromArray:contentArray];

 

Son olarak diziye grafiğin alacağı x ve y değerlerini giriyoruz. Bundan sonraki adımda temsilci (delegate) metodlar yardımıyla her noktadaki değeri ekrana çizdireceğiz.

 

-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot
{
return [dataForChart count];
}
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
NSDecimalNumber *num = nil;
NSString *key = (fieldEnum == CPTScatterPlotFieldX ? @"x" : @"y");
num = [[dataForChart objectAtIndex:index] valueForKey:key];
return num;
}

 

numberOfRecordsForPlot: metodu çizilecek grafikteki nokta sayısını belirler. Biz bütün değerleri diziye eklediğimizden dizinin boyutu grafikteki nokta sayısını verecektir. Hangi noktaya hangi değerin geleceğini ise numberForPlot:field:recordIndex: metodu ile belirleriz. Burada x ekseni için x anahtarına karşılık gelen değer, y ekseni içinse y anahtarına karşılık gelen değeri ekrana yazdırıyoruz. Kodumuzu çalıştırdığımızda aşağıdaki grafikle karşılaşırız.

Projenin adresi: https://code.google.com/p/core-plot/