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

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

【iOS】core-plotを使用してグラフ作成 その2:実装編

前回で準備が整ったので、用意したプロジェクトを開きます。
今回は、core-plotを使用して「棒グラフ」を作成してきます。

グラフの実装

まず、始めにViewController.hにデリゲート、プロパティを追加します。

#import <UIKit/UIKit.h>
#import "CorePlot-CocoaTouch.h"
@interface ViewController : UIViewController<CPTPlotDataSource,CPTPlotSpaceDelegate>

@property(nonatomic, strong) CPTXYGraph *barChart;

次にViewController.mを作成します。viewDidLoad内に以下を記述します。


//ホスティングビューを生成する---------------------------------------------
CPTGraphHostingView *hostingView = [[CPTGraphHostingView alloc] init];
hostingView.collapsesLayers = NO;
self.view = hostingView;

// グラフのテーマを生成-----------------------------------

self.barChart = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
CPTTheme *theme = [CPTTheme themeNamed:kCPTPlainWhiteTheme]; //kCPTPlainWhiteTheme
[self.barChart applyTheme:theme];
hostingView.hostedGraph = self.barChart;

// ボーダー設定------------------------------------------------------
self.barChart.plotAreaFrame.borderLineStyle = nil;
self.barChart.plotAreaFrame.cornerRadius    = 0.0f;

この段階で一度実行してみましょう。
image1

外枠が表示されました。グラフの表示位置やテキストのスタイルを追加していきます。数値を変更して調整をして下さい。


// Paddings----------------------------------------------------
self.barChart.paddingLeft   = 0.0f;
self.barChart.paddingRight  = 0.0f;
self.barChart.paddingTop    = 0.0f;
self.barChart.paddingBottom = 0.0f;

self.barChart.plotAreaFrame.paddingLeft   = 60.0f;
self.barChart.plotAreaFrame.paddingTop    = 60.0f;
self.barChart.plotAreaFrame.paddingRight  = 20.0f;
self.barChart.plotAreaFrame.paddingBottom = 65.0f;

// テキストスタイル------------------------------------------------------------------------------------------------
CPTMutableTextStyle *textStyle = [CPTTextStyle textStyle];
textStyle.color                = [CPTColor colorWithComponentRed:0.447f green:0.443f blue:0.443f alpha:1.0f];
textStyle.fontSize             = 13.0f;
textStyle.textAlignment        = CPTTextAlignmentCenter;

// ラインスタイル--------------------------------------------------------------------------------------------------
CPTMutableLineStyle *lineStyle = [CPTMutableLineStyle lineStyle];
lineStyle.lineColor            = [CPTColor colorWithComponentRed:0.788f green:0.792f blue:0.792f alpha:1.0f];
lineStyle.lineWidth            = 2.0f;

image2
表示位置が変更され、目盛が追加されました。
次に目盛の範囲とX,Y軸のラベルの設定を行います。まずはグラフの目盛間隔を設定します。

//プロット間隔の設定 ----------------------------------------------------
CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)self.barChart.defaultPlotSpace;
//Y軸は0〜10
plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromInt(0) length:CPTDecimalFromInt(10)];
//X軸は0〜5
plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromInt(0) length:CPTDecimalFromInt(5)];
image3

段々グラフの形っぽくなってきましたね。

今回はここまで。


One Comment

コメントをどうぞ

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


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

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

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

03-3541-1230

info@nvtrlab.jp

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