簡単な棒グラフでパーツの確認

CorePlot Xcode

取り敢えず以下の様な棒グラフを描くのに必要なプロパティの設定について少しずつ確認していく。

準備としてココでのサンプルの viewDidLoad の部分を空にする。

- (void)viewDidLoad
{
    [super viewDidLoad];
}

この状態からコードを加えていって結果がどうなるのかを少しずつ確認してみる。
まずは大きな括りのグラフ（CPTXYGraph）を作ってテーマを設定、ViewController の view にそのグラフを設定するところまで。

	// Create graph from theme
	graph = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
	CPTTheme *theme = [CPTTheme themeNamed:kCPTDarkGradientTheme];
	[graph applyTheme:theme];
	CPTGraphHostingView *hostingView = (CPTGraphHostingView *)self.view;
	hostingView.collapsesLayers = NO; // Setting to YES reduces GPU memory usage, but can slow drawing/scrolling
	hostingView.hostedGraph = graph;

テーマは以下の5種類用意されている。

  • Dark Gradients（kCPTDarkGradientTheme）
  • Plain Black（kCPTPlainWhiteTheme）
  • Plain White（kCPTPlainBlackTheme）
  • Slate（kCPTSlateTheme）
  • Stocks（kCPTStocksTheme）

この状態でアプリケーションを起動すると、graph の上下左右にデフォルト値 20ピクセル分 padding された PlotAreaFrame に角丸矩形が描かれる。

例えばここで、graph の padding を上下左右 10にするにはこんな感じ。

	graph.paddingLeft = 10.0;
	graph.paddingTop = 10.0;
	graph.paddingRight = 10.0;
	graph.paddingBottom = 10.0;

これで画面の上下左右 10ピクセル内側が PlotAreaFrame になって、ここに角丸矩形が表示される。

ここで更に

	graph.plotAreaFrame.borderLineStyle = nil;

とすると、太枠線は描かれなくなる。

今の状態だと PlotAreaFrame がそのまま PlotArea になっているので、X,Y軸やタイトル等を描く場所がない。
そこで、PlotAreaFrame の padding を設定するとデフォルトの X,Y軸が現れる。

	graph.plotAreaFrame.paddingLeft = 70.0;
	graph.plotAreaFrame.paddingTop = 20.0;
	graph.plotAreaFrame.paddingRight = 20.0;
	graph.plotAreaFrame.paddingBottom = 40.0;


画面左端から Y軸までは graph.paddingLeft + graph.plotAreaFrame.paddingLeft = 80.0 ピクセル
画面上端から Y軸までは graph.paddingTop + graph.plotAreaFrame.paddingTop = 30.0 ピクセル
画面右端から X軸までは graph.paddingRight + graph.plotAreaFrame.paddingRight = 30.0 ピクセル
画面下端から X軸までは graph.paddingBottom + graph.plotAreaFrame.paddingBottom = 50.0 ピクセル
となっている。


というわけで、今日は眠いのでここまで…。
明日はグラフ完成まで！