お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

core-plotを使用してグラフ作成 その3:棒グラフ実装編

前回は、グラフの枠線やテキスト設定といった内容でした。
今回は、「棒グラフ」のバーを表示していきたいと思います。

X、Y軸を設定

X、Y軸の各目盛など設定を行います。

// X軸のメモリ・ラベルなどの設定----------------------------------------------------------------------------------

CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.barChart.axisSet;
CPTXYAxis *x          = axisSet.xAxis;

x.axisLineStyle               = lineStyle;
x.majorTickLineStyle          = lineStyle;
x.minorTickLineStyle          = lineStyle;
x.majorIntervalLength         = CPTDecimalFromString(@"1");
x.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
x.title                       = @"X軸";
x.titleTextStyle = textStyle;
x.titleLocation               = CPTDecimalFromFloat(5.0f);
x.titleOffset                 = 36.0f;
x.minorTickLength = 5.0f;
x.majorTickLength = 9.0f;
x.labelRotation  = M_PI / 4; // 表示角度
x.labelTextStyle = textStyle;

// Y軸のメモリ・ラベルなどの設定----------------------------------------------------------------------------------
CPTXYAxis *y = axisSet.yAxis;

y.axisLineStyle               = lineStyle;
y.minorTickLength = 5.0f;
y.majorTickLength = 9.0f;
y.majorTickLineStyle          = lineStyle;
y.minorTickLineStyle          = lineStyle;
y.majorIntervalLength         = CPTDecimalFromFloat(2.0f);
y.orthogonalCoordinateDecimal = CPTDecimalFromFloat(0.0f);
y.title                       = @"Y軸";
y.titleTextStyle = textStyle;
y.titleRotation = M_PI*2;
y.titleLocation               = CPTDecimalFromFloat(10.5f);
y.titleOffset                 = 25.0f;
lineStyle.lineWidth = 0.5f;
y.majorGridLineStyle = lineStyle;
y.labelTextStyle = textStyle;

X、Y軸それぞれの設定値が反映させていることがわかります。

棒グラフ「CPTBarPlot」を設定

棒グラフは「CPTBarPlot」を使います。


// バー表示設定---------------------------------------------------------------------------------------------
CPTBarPlot *barPlot = [CPTBarPlot tubularBarPlotWithColor:[CPTColor colorWithComponentRed:1.0f green:1.0f blue:0.88f alpha:1.0f] horizontalBars:NO];

barPlot.fill = [CPTFill fillWithColor:[CPTColor colorWithComponentRed:0.573f green:0.82f blue:0.831f alpha:0.50f]];

barPlot.lineStyle = lineStyle;
barPlot.baseValue  = CPTDecimalFromString(@"0");
barPlot.dataSource = self;
barPlot.barWidth = CPTDecimalFromFloat(0.5f);
barPlot.barOffset  = CPTDecimalFromFloat(0.5f);
[self.barChart addPlot:barPlot toPlotSpace:plotSpace];

次に表示させるグラフの個数を設定します。

-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot

を使用します。

-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot
{
       return 5;
}

各グラフの設定値を与えます。

-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
NSDecimalNumber *num = nil;

if ( [plot isKindOfClass:[CPTBarPlot class]] ) {

switch ( fieldEnum ) {
//X方向の位置を指定
case CPTBarPlotFieldBarLocation:
num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:index];
break;

//棒の高さを指定
case CPTBarPlotFieldBarTip:
if(index == 0){
num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:1];
}else if(index == 1){
num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:3];
}else if(index == 2){
num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:5];
}else if(index == 3){
num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:7];
}else if(index == 4){
num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:9];
}
break;
}
}
return num;
}

image2
これで棒グラフが表示されました。
各設定値を変更してカスタマイズしてみて下さい。

今回はここまで!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00