忘れた頃に更新ということで、今回は【core-plot】第二弾です。
時間があればXYグラフ以外にも作成してみたいけど・・・どうだろう。
前回は【core-plot】を使うための設定を羅列したはずなので、
まだ設定していない方は前回の記事を参照しておいてください。
前回作っておいた【CorePlotTest】プロジェクトを開いて続けます。
まずは【CorePlotTestViewController.h】から。
気が向いたらソースもアップしますが、とりあえず必要なもののみ記述します。
#import
【QuartzCore/QuartzCore.h】
【CorePlot-CocoaTouch.h】
delegate
【CPPlotDataSource】
変数宣言
【CPXYGraph *graph】
【NSMutableArray *dataForPlot】
@property
【(readwrite, retain, nonatomic) NSMutableArray *dataForPlot】
次に【CorePlotTestViewController.m】に移ります。
コードを追加する場所はアプリによるとは思いますが、今回は【viewDidLoad】で。
今回の目的は、任意のviewにグラフを描くってことで。。。
- (void)viewDidLoad {
[super viewDidLoad];
// ここのメモリ管理は正しいのかな？
// 複数画面あるアプリでリークしないための解放処理
if (graph != nil) {
[graph release];
for (id v in self.view.subviews) {
if ([v class] == [CPLayerHostingView class]) {
[v removeFromSuperview];
}
}
}
// グラフのサイズを決めてテーマを設定
graph = [[CPXYGraph alloc] initWithFrame:CGRectZero];
CPTheme *theme = [CPTheme themeNamed:kCPDarkGradientTheme];
[graph applyTheme:theme];
// 最終的にViewController内のviewにCPLayerHostingViewをaddSubViewします。
CPLayerHostingView *hostingView = [[[CPLayerHostingView alloc] initWithFrame:self.view.bounds] autorelease];
hostingView.hostedLayer = graph;
// 余白は適当に。
graph.paddingLeft = 0.0;
graph.paddingTop = 0.0;
graph.paddingRight = 0.0;
graph.paddingBottom = 0.0;
// 描画スペースの作成
CPXYPlotSpace *plotSpace = (CPXYPlotSpace *)graph.defaultPlotSpace;
// デフォルトがNOになっています。YESにすることでグラフを掴んでグリグリできます。
plotSpace.allowsUserInteraction = YES;
// FromからFrom + float 分を初期表示しますよって設定。
plotSpace.xRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(-2.5) length:CPDecimalFromFloat(12.0)];
plotSpace.yRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(-55) length:CPDecimalFromFloat(365.0)];
// XY軸設定
CPXYAxisSet *axisSet = (CPXYAxisSet *)graph.axisSet;
// X軸からいってみよう
CPXYAxis *x = axisSet.xAxis;
// X軸の中心と目盛りの幅を設定
x.majorIntervalLength = CPDecimalFromString(@"1");
x.orthogonalCoordinateDecimal = CPDecimalFromString(@"0");
x.minorTicksPerInterval = 0;
// タイトルはXジャンプ・・・
[x setTitle:@"X Jump"];
// 無限に目盛り出るのが嫌ならVisibleRangeプロパティ。
[x setVisibleRange:[CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0.0) length:CPDecimalFromFloat(30.0)]];
//飛んでいきそうなフォントをタイトルと軸に設定しちゃいましょう。
CPTextStyle *textStyleX = [[CPTextStyle alloc] init];
[textStyleX setFontName:@"Georgia"];
[textStyleX setColor:[CPColor cyanColor]];
[x setLabelTextStyle:textStyleX];
[textStyleX setColor:[CPColor yellowColor]];
[textStyleX setFontSize:16.0f];
[x setTitleTextStyle:textStyleX];
[textStyleX release];
// 1.0 2.0って出ると面倒なのでFormat♪これで1 2 3...
NSNumberFormatter *formatterX = [[NSNumberFormatter alloc] init];
[formatterX setMaximumFractionDigits:0];
x.labelFormatter = formatterX;
[formatterX release];
// 続けてY軸も・・・X Jumpでどれだけ飛べるかな？
CPXYAxis *y = axisSet.yAxis;
y.majorIntervalLength = CPDecimalFromString(@"30");
y.minorTicksPerInterval = 1;
y.orthogonalCoordinateDecimal = CPDecimalFromString(@"0");
[y setTitle:@"Score"];
[y setVisibleRange:[CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0.0) length:CPDecimalFromFloat(310.0)]];
CPTextStyle *textStyleY = [[CPTextStyle alloc] init];
[textStyleY setFontName:@"Georgia"];
[textStyleY setColor:[CPColor cyanColor]];
[y setLabelTextStyle:textStyleY];
[textStyleY setColor:[CPColor yellowColor]];
[textStyleY setFontSize:16.0f];
[y setTitleTextStyle:textStyleY];
[textStyleY release];
NSNumberFormatter *formatterY = [[NSNumberFormatter alloc] init];
[formatterY setMaximumFractionDigits:0];
y.labelFormatter = formatterY;
[formatterY release];
// ようやくここからデータ本体を作る？X Jumpとかやってる場合じゃないな
CPScatterPlot *scorePlot = [[[CPScatterPlot alloc] init] autorelease];
// identifierは何でもいいです。識別するために使うもので、これじゃないとダメ！ってことはないですね
scorePlot.identifier = @"score Plot";
scorePlot.dataLineStyle.miterLimit = 1.0f;
scorePlot.dataLineStyle.lineWidth = 3.0f;
scorePlot.dataLineStyle.lineColor = [CPColor blueColor];
scorePlot.dataSource = self;
[graph addPlot:scorePlot];
// グラデーションつけてかっこつけてみよう
// 青～黒(テーマが黒いから)にわかりづらいけど...
CPColor *areaColor1 = [CPColor colorWithComponentRed:0.3 green:0.3 blue:1.0 alpha:0.8];
CPGradient *areaGradient1 = [CPGradient gradientWithBeginningColor:areaColor1 endingColor:[CPColor clearColor]];
CPFill *areaGradientFill = [CPFill fillWithGradient:areaGradient1];
scorePlot.areaFill = areaGradientFill;
scorePlot.areaBaseValue = [[NSDecimalNumber zero] decimalValue];
// まだまだグラフの設定。丸いドットを作って設定。
// 星形とか四角とか三角とかデフォルトで設定できます
CPLineStyle *symbolLineStyle = [CPLineStyle lineStyle];
symbolLineStyle.lineColor = [CPColor blackColor];
CPPlotSymbol *plotSymbol = [CPPlotSymbol ellipsePlotSymbol];
plotSymbol.fill = [CPFill fillWithColor:[CPColor blueColor]];
plotSymbol.lineStyle = symbolLineStyle;
plotSymbol.size = CGSizeMake(10.0, 10.0);
scorePlot.plotSymbol = plotSymbol;
// さらにかっこつけるため・・・グラフを点滅！！
CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeInAnimation.duration = 0.5f;
// 無限回繰り返すには【1e100f】。テストに出るよ～。
fadeInAnimation.repeatCount = 1e100f;
fadeInAnimation.autoreverses = YES;
fadeInAnimation.removedOnCompletion = YES;
fadeInAnimation.fillMode = kCAFillModeForwards;
fadeInAnimation.fromValue = [NSNumber numberWithFloat:0.5];
fadeInAnimation.toValue = [NSNumber numberWithFloat:1.0];
[scorePlot addAnimation:fadeInAnimation forKey:@"animateOpacity"];
// 最後にデータを突っ込んで終わりが見える。X Jumpは飛べば飛ぶほど高さが落ちる・・・
NSMutableArray *contentArray = [NSMutableArray arrayWithCapacity:30];
NSUInteger i;
for ( i = 0; i < 10; i++ ) {
id x = [NSNumber numberWithFloat:i];
id y = [NSNumber numberWithFloat:100 - i * i];
[contentArray addObject:[NSMutableDictionary dictionaryWithObjectsAndKeys:x, @"x", y, @"y", nil]];
}
self.dataForPlot = contentArray;
// 最後にaddSubViewしておきます。
[self addSubview:hostingView];
}
わ～い、終わった～♪
【viewDidLoad】が。。。もう少し～あと少し～ by ZA○D。
後は２つほど関数を記述して終わり。
-(NSUInteger)numberOfRecordsForPlot:(CPPlot *)plot {
return [dataForPlot count];
}
-(NSNumber *)numberForPlot:(CPPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
// 補助線とか引っ張りたければここからも出来る。やれば出来るは魔法の合い言葉
// ここで平均ジャンプとか設定したりね。設定するにはエリアを作ってないとダメだけど。
}
基本的には【CorePlot-CocoaTouch.xcodeproj】見てもらうのが早いですが、
簡単に解説にもならないコメントをポツポツ入れてみました。実行してみると、
こ～んなグラフが動いていることでしょう。
私自身は長文により動きが止まりかけてます。。。
時間があればXYグラフ以外にも作成してみたいけど・・・どうだろう。
前回は【core-plot】を使うための設定を羅列したはずなので、
まだ設定していない方は前回の記事を参照しておいてください。
前回作っておいた【CorePlotTest】プロジェクトを開いて続けます。
まずは【CorePlotTestViewController.h】から。
気が向いたらソースもアップしますが、とりあえず必要なもののみ記述します。
#import
【QuartzCore/QuartzCore.h】
【CorePlot-CocoaTouch.h】
delegate
【CPPlotDataSource】
変数宣言
【CPXYGraph *graph】
【NSMutableArray *dataForPlot】
@property
【(readwrite, retain, nonatomic) NSMutableArray *dataForPlot】
次に【CorePlotTestViewController.m】に移ります。
コードを追加する場所はアプリによるとは思いますが、今回は【viewDidLoad】で。
今回の目的は、任意のviewにグラフを描くってことで。。。
- (void)viewDidLoad {
[super viewDidLoad];
// ここのメモリ管理は正しいのかな？
// 複数画面あるアプリでリークしないための解放処理
if (graph != nil) {
[graph release];
for (id v in self.view.subviews) {
if ([v class] == [CPLayerHostingView class]) {
[v removeFromSuperview];
}
}
}
// グラフのサイズを決めてテーマを設定
graph = [[CPXYGraph alloc] initWithFrame:CGRectZero];
CPTheme *theme = [CPTheme themeNamed:kCPDarkGradientTheme];
[graph applyTheme:theme];
// 最終的にViewController内のviewにCPLayerHostingViewをaddSubViewします。
CPLayerHostingView *hostingView = [[[CPLayerHostingView alloc] initWithFrame:self.view.bounds] autorelease];
hostingView.hostedLayer = graph;
// 余白は適当に。
graph.paddingLeft = 0.0;
graph.paddingTop = 0.0;
graph.paddingRight = 0.0;
graph.paddingBottom = 0.0;
// 描画スペースの作成
CPXYPlotSpace *plotSpace = (CPXYPlotSpace *)graph.defaultPlotSpace;
// デフォルトがNOになっています。YESにすることでグラフを掴んでグリグリできます。
plotSpace.allowsUserInteraction = YES;
// FromからFrom + float 分を初期表示しますよって設定。
plotSpace.xRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(-2.5) length:CPDecimalFromFloat(12.0)];
plotSpace.yRange = [CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(-55) length:CPDecimalFromFloat(365.0)];
// XY軸設定
CPXYAxisSet *axisSet = (CPXYAxisSet *)graph.axisSet;
// X軸からいってみよう
CPXYAxis *x = axisSet.xAxis;
// X軸の中心と目盛りの幅を設定
x.majorIntervalLength = CPDecimalFromString(@"1");
x.orthogonalCoordinateDecimal = CPDecimalFromString(@"0");
x.minorTicksPerInterval = 0;
// タイトルはXジャンプ・・・
[x setTitle:@"X Jump"];
// 無限に目盛り出るのが嫌ならVisibleRangeプロパティ。
[x setVisibleRange:[CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0.0) length:CPDecimalFromFloat(30.0)]];
//飛んでいきそうなフォントをタイトルと軸に設定しちゃいましょう。
CPTextStyle *textStyleX = [[CPTextStyle alloc] init];
[textStyleX setFontName:@"Georgia"];
[textStyleX setColor:[CPColor cyanColor]];
[x setLabelTextStyle:textStyleX];
[textStyleX setColor:[CPColor yellowColor]];
[textStyleX setFontSize:16.0f];
[x setTitleTextStyle:textStyleX];
[textStyleX release];
// 1.0 2.0って出ると面倒なのでFormat♪これで1 2 3...
NSNumberFormatter *formatterX = [[NSNumberFormatter alloc] init];
[formatterX setMaximumFractionDigits:0];
x.labelFormatter = formatterX;
[formatterX release];
// 続けてY軸も・・・X Jumpでどれだけ飛べるかな？
CPXYAxis *y = axisSet.yAxis;
y.majorIntervalLength = CPDecimalFromString(@"30");
y.minorTicksPerInterval = 1;
y.orthogonalCoordinateDecimal = CPDecimalFromString(@"0");
[y setTitle:@"Score"];
[y setVisibleRange:[CPPlotRange plotRangeWithLocation:CPDecimalFromFloat(0.0) length:CPDecimalFromFloat(310.0)]];
CPTextStyle *textStyleY = [[CPTextStyle alloc] init];
[textStyleY setFontName:@"Georgia"];
[textStyleY setColor:[CPColor cyanColor]];
[y setLabelTextStyle:textStyleY];
[textStyleY setColor:[CPColor yellowColor]];
[textStyleY setFontSize:16.0f];
[y setTitleTextStyle:textStyleY];
[textStyleY release];
NSNumberFormatter *formatterY = [[NSNumberFormatter alloc] init];
[formatterY setMaximumFractionDigits:0];
y.labelFormatter = formatterY;
[formatterY release];
// ようやくここからデータ本体を作る？X Jumpとかやってる場合じゃないな
CPScatterPlot *scorePlot = [[[CPScatterPlot alloc] init] autorelease];
// identifierは何でもいいです。識別するために使うもので、これじゃないとダメ！ってことはないですね
scorePlot.identifier = @"score Plot";
scorePlot.dataLineStyle.miterLimit = 1.0f;
scorePlot.dataLineStyle.lineWidth = 3.0f;
scorePlot.dataLineStyle.lineColor = [CPColor blueColor];
scorePlot.dataSource = self;
[graph addPlot:scorePlot];
// グラデーションつけてかっこつけてみよう
// 青～黒(テーマが黒いから)にわかりづらいけど...
CPColor *areaColor1 = [CPColor colorWithComponentRed:0.3 green:0.3 blue:1.0 alpha:0.8];
CPGradient *areaGradient1 = [CPGradient gradientWithBeginningColor:areaColor1 endingColor:[CPColor clearColor]];
CPFill *areaGradientFill = [CPFill fillWithGradient:areaGradient1];
scorePlot.areaFill = areaGradientFill;
scorePlot.areaBaseValue = [[NSDecimalNumber zero] decimalValue];
// まだまだグラフの設定。丸いドットを作って設定。
// 星形とか四角とか三角とかデフォルトで設定できます
CPLineStyle *symbolLineStyle = [CPLineStyle lineStyle];
symbolLineStyle.lineColor = [CPColor blackColor];
CPPlotSymbol *plotSymbol = [CPPlotSymbol ellipsePlotSymbol];
plotSymbol.fill = [CPFill fillWithColor:[CPColor blueColor]];
plotSymbol.lineStyle = symbolLineStyle;
plotSymbol.size = CGSizeMake(10.0, 10.0);
scorePlot.plotSymbol = plotSymbol;
// さらにかっこつけるため・・・グラフを点滅！！
CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeInAnimation.duration = 0.5f;
// 無限回繰り返すには【1e100f】。テストに出るよ～。
fadeInAnimation.repeatCount = 1e100f;
fadeInAnimation.autoreverses = YES;
fadeInAnimation.removedOnCompletion = YES;
fadeInAnimation.fillMode = kCAFillModeForwards;
fadeInAnimation.fromValue = [NSNumber numberWithFloat:0.5];
fadeInAnimation.toValue = [NSNumber numberWithFloat:1.0];
[scorePlot addAnimation:fadeInAnimation forKey:@"animateOpacity"];
// 最後にデータを突っ込んで終わりが見える。X Jumpは飛べば飛ぶほど高さが落ちる・・・
NSMutableArray *contentArray = [NSMutableArray arrayWithCapacity:30];
NSUInteger i;
for ( i = 0; i < 10; i++ ) {
id x = [NSNumber numberWithFloat:i];
id y = [NSNumber numberWithFloat:100 - i * i];
[contentArray addObject:[NSMutableDictionary dictionaryWithObjectsAndKeys:x, @"x", y, @"y", nil]];
}
self.dataForPlot = contentArray;
// 最後にaddSubViewしておきます。
[self addSubview:hostingView];
}
わ～い、終わった～♪
【viewDidLoad】が。。。もう少し～あと少し～ by ZA○D。
後は２つほど関数を記述して終わり。
-(NSUInteger)numberOfRecordsForPlot:(CPPlot *)plot {
return [dataForPlot count];
}
-(NSNumber *)numberForPlot:(CPPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
// 補助線とか引っ張りたければここからも出来る。やれば出来るは魔法の合い言葉
// ここで平均ジャンプとか設定したりね。設定するにはエリアを作ってないとダメだけど。
}
基本的には【CorePlot-CocoaTouch.xcodeproj】見てもらうのが早いですが、
簡単に解説にもならないコメントをポツポツ入れてみました。実行してみると、
こ～んなグラフが動いていることでしょう。
私自身は長文により動きが止まりかけてます。。。