CorePlot の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
CorePlot へ行く。
- 1 (2013-03-29 (金) 19:57:06)
- 2 (2013-03-29 (金) 20:45:43)

&tag(CorePlot);

目次†[edit]

目次
参考情報
概要
セットアップ
- CocoaPodsを使用
サンプル作成
- 基礎知識
- ヘッダーのインクルード
棒グラフの描画
- 初めての棒グラフ

↑

参考情報†[edit]

core-plot - Cocoa plotting framework for OS X and iOS - Google Project Hosting

↑

概要†[edit]

iOSで使えるグラフ描画ライブラリ

↑

セットアップ†[edit]

↑

CocoaPodsを使用†[edit]

hgが必要なので事前にインストールしておく。
Podfileを編集
```
platform :ios
pod 'CorePlot'
```
インストール
```
$ pod install
```

↑

サンプル作成†[edit]

↑

基礎知識†[edit]

公式サイトからダウンロードできるzipファイルの中にサンプルあり。
iPhone用はCPTTestApp-iPhoneというフォルダにある。

↑

ヘッダーのインクルード†[edit]

プロジェクト.pchでインクルードしておくと便利。
```
    #import "CorePlot-CocoaTouch.h"
```

↑

棒グラフの描画†[edit]

↑

初めての棒グラフ†[edit]

↑

前置き†[edit]

サンプルアプリと同様の棒グラフをさらのUIViewControllerのサブクラスに描画してみる。
サンプルはxibを使ってviewを入れ替えているが以下のコードではコードでviewを置き換えている。
ソースはARC対応で作成(releaseなどはなし)。

↑

ヘッダーの修正†[edit]

データを提供するために、CPTPlotDataSourceを実装する。

@interface CPTTestAppBarChartController : UIViewController<CPTPlotDataSource>

↑

ソースファイルの編集†[edit]

CPTXYGraphをプライベートプロパティとして保持

@interface DemoFirstViewController ()
@property(nonatomic, strong) CPTXYGraph *barChart;
@end

viewDidLoadを次のように修正する。

- (void)viewDidLoad
{
    [super viewDidLoad];

    //viewを置き換える必要がある
    CPTGraphHostingView *hostingView = [[CPTGraphHostingView alloc] init];
    hostingView.collapsesLayers = NO; // Setting to YES reduces GPU memory usage, but can slow drawing/scrolling
    self.view = hostingView;
    
    // Create barChart from theme
    self.barChart = [[CPTXYGraph alloc] initWithFrame:CGRectZero];
    CPTTheme *theme = [CPTTheme themeNamed:kCPTDarkGradientTheme];
    [self.barChart applyTheme:theme];
    hostingView.hostedGraph = self.barChart;
    
    
    // Border
    self.barChart.plotAreaFrame.borderLineStyle = nil;
    self.barChart.plotAreaFrame.cornerRadius    = 0.0f;
    
    // 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   = 70.0;
    self.barChart.plotAreaFrame.paddingTop    = 20.0;
    self.barChart.plotAreaFrame.paddingRight  = 20.0;
    self.barChart.plotAreaFrame.paddingBottom = 80.0;
    
    // Graph title
    self.barChart.title = @"Graph Title\nLine 2";
    CPTMutableTextStyle *textStyle = [CPTTextStyle textStyle];
    textStyle.color                   = [CPTColor grayColor];
    textStyle.fontSize                = 16.0f;
    textStyle.textAlignment           = CPTTextAlignmentCenter;
    self.barChart.titleTextStyle           = textStyle;
    self.barChart.titleDisplacement        = CGPointMake(0.0f, -20.0f);
    self.barChart.titlePlotAreaFrameAnchor = CPTRectAnchorTop;
    
    // Add plot space for horizontal bar charts
    CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)self.barChart.defaultPlotSpace;
    plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(300.0f)];
    plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(16.0f)];
    
    CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.barChart.axisSet;
    CPTXYAxis *x          = axisSet.xAxis;
    x.axisLineStyle               = nil;
    x.majorTickLineStyle          = nil;
    x.minorTickLineStyle          = nil;
    x.majorIntervalLength         = CPTDecimalFromString(@"5");
    x.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
    x.title                       = @"X Axis";
    x.titleLocation               = CPTDecimalFromFloat(7.5f);
    x.titleOffset                 = 55.0f;
    
    // Define some custom labels for the data elements
    x.labelRotation  = M_PI / 4;
    x.labelingPolicy = CPTAxisLabelingPolicyNone;
    NSArray *customTickLocations = [NSArray arrayWithObjects:[NSDecimalNumber numberWithInt:1], [NSDecimalNumber numberWithInt:5], [NSDecimalNumber numberWithInt:10], [NSDecimalNumber numberWithInt:15], nil];
    NSArray *xAxisLabels         = [NSArray arrayWithObjects:@"Label A", @"Label B", @"Label C", @"Label D", @"Label E", nil];
    NSUInteger labelLocation     = 0;
    NSMutableArray *customLabels = [NSMutableArray arrayWithCapacity:[xAxisLabels count]];
    for ( NSNumber *tickLocation in customTickLocations ) {
        CPTAxisLabel *newLabel = [[CPTAxisLabel alloc] initWithText:[xAxisLabels objectAtIndex:labelLocation++] textStyle:x.labelTextStyle];
        newLabel.tickLocation = [tickLocation decimalValue];
        newLabel.offset       = x.labelOffset + x.majorTickLength;
        newLabel.rotation     = M_PI / 4;
        [customLabels addObject:newLabel];
    }
    
    x.axisLabels = [NSSet setWithArray:customLabels];
    
    CPTXYAxis *y = axisSet.yAxis;
    y.axisLineStyle               = nil;
    y.majorTickLineStyle          = nil;
    y.minorTickLineStyle          = nil;
    y.majorIntervalLength         = CPTDecimalFromString(@"50");
    y.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
    y.title                       = @"Y Axis";
    y.titleOffset                 = 45.0f;
    y.titleLocation               = CPTDecimalFromFloat(150.0f);
    
    // First bar plot
    CPTBarPlot *barPlot = [CPTBarPlot tubularBarPlotWithColor:[CPTColor darkGrayColor] horizontalBars:NO];
    barPlot.baseValue  = CPTDecimalFromString(@"0");
    barPlot.dataSource = self;
    barPlot.barOffset  = CPTDecimalFromFloat(-0.25f);
    barPlot.identifier = @"Bar Plot 1";
    [self.barChart addPlot:barPlot toPlotSpace:plotSpace];
    
    // Second bar plot
    barPlot                 = [CPTBarPlot tubularBarPlotWithColor:[CPTColor blueColor] horizontalBars:NO];
    barPlot.dataSource      = self;
    barPlot.baseValue       = CPTDecimalFromString(@"0");
    barPlot.barOffset       = CPTDecimalFromFloat(0.25f);
    barPlot.barCornerRadius = 2.0f;
    barPlot.identifier      = @"Bar Plot 2";
    [self.barChart addPlot:barPlot toPlotSpace:plotSpace];
}

CPTPlotDataSourceのメソッドを実装

#pragma mark -
#pragma mark Plot Data Source Methods

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

-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
    NSDecimalNumber *num = nil;
    
    if ( [plot isKindOfClass:[CPTBarPlot class]] ) {
        switch ( fieldEnum ) {
            case CPTBarPlotFieldBarLocation:
                num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:index];
                break;
                
            case CPTBarPlotFieldBarTip:
                num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:(index + 1) * (index + 1)];
                if ( [plot.identifier isEqual:@"Bar Plot 2"] ) {
                    num = [num decimalNumberBySubtracting:[NSDecimalNumber decimalNumberWithString:@"10"]];
                }
                break;
        }
    }
    
    return num;
}

↑

以上で一応完成†[edit]

実行すればグレーと青の2種類の棒グラフが画面に表示される。
以下ポイントの説明など。

↑

タイトル・パディングなどの設定†[edit]

タイトルやPaddingなどは以下の部分で設定されている。試行錯誤してみればどこがどれに該当しているかは比較的わかりやすい。

    // Border
    self.barChart.plotAreaFrame.borderLineStyle = nil;
    self.barChart.plotAreaFrame.cornerRadius    = 0.0f;
    
    // 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   = 70.0;
    self.barChart.plotAreaFrame.paddingTop    = 20.0;
    self.barChart.plotAreaFrame.paddingRight  = 20.0;
    self.barChart.plotAreaFrame.paddingBottom = 80.0;
    
    // Graph title
    self.barChart.title = @"Graph Title\nLine 2";
    CPTMutableTextStyle *textStyle = [CPTTextStyle textStyle];
    textStyle.color                   = [CPTColor grayColor];
    textStyle.fontSize                = 16.0f;
    textStyle.textAlignment           = CPTTextAlignmentCenter;
    self.barChart.titleTextStyle           = textStyle;
    self.barChart.titleDisplacement        = CGPointMake(0.0f, -20.0f);
    self.barChart.titlePlotAreaFrameAnchor = CPTRectAnchorTop;

↑

プロット間隔の設定†[edit]

開始、終了時点の値の情報は、CPTXYPlotSpaceを使って指定する。

    CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)self.barChart.defaultPlotSpace;
    //Y軸の範囲(0〜300)
    plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(300.0f)];
    //X軸の範囲(0〜16)
    plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(0.0f) length:CPTDecimalFromFloat(16.0f)];

↑

X軸のメモリ・ラベルなどの設定†[edit]

CPTXYAxisに設定する。サンプルではX方向にカスタムしたラベルを表示するためコードが長くなっている。axisLineStyle(X軸のラインスタイル)、majorTickLineStyle(大目盛りのラインスタイル)、minorTickLineStyle(小目盛りのラインスタイル)がnilに設定されているため、横方向の線自体はまったく書かれない事に注意。

    CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.barChart.axisSet;
    CPTXYAxis *x          = axisSet.xAxis;
    x.axisLineStyle               = nil;
    x.majorTickLineStyle          = nil;
    x.minorTickLineStyle          = nil;
    x.majorIntervalLength         = CPTDecimalFromString(@"5");
    x.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
    x.title                       = @"X Axis";
    x.titleLocation               = CPTDecimalFromFloat(7.5f);
    x.titleOffset                 = 55.0f;
    
    // Define some custom labels for the data elements
    x.labelRotation  = M_PI / 4;
    x.labelingPolicy = CPTAxisLabelingPolicyNone;
    NSArray *customTickLocations = [NSArray arrayWithObjects:[NSDecimalNumber numberWithInt:1], [NSDecimalNumber numberWithInt:5], [NSDecimalNumber numberWithInt:10], [NSDecimalNumber numberWithInt:15], nil];
    NSArray *xAxisLabels         = [NSArray arrayWithObjects:@"Label A", @"Label B", @"Label C", @"Label D", @"Label E", nil];
    NSUInteger labelLocation     = 0;
    NSMutableArray *customLabels = [NSMutableArray arrayWithCapacity:[xAxisLabels count]];
    for ( NSNumber *tickLocation in customTickLocations ) {
        CPTAxisLabel *newLabel = [[CPTAxisLabel alloc] initWithText:[xAxisLabels objectAtIndex:labelLocation++] textStyle:x.labelTextStyle];
        newLabel.tickLocation = [tickLocation decimalValue];
        newLabel.offset       = x.labelOffset + x.majorTickLength;
        newLabel.rotation     = M_PI / 4;
        [customLabels addObject:newLabel];
    }
    
    x.axisLabels = [NSSet setWithArray:customLabels];

↑

Y軸のメモリ・ラベル†[edit]

同様に設定。こっちは独自ラベルの設定はないので数字が描画される。

    CPTXYAxis *y = axisSet.yAxis;
    y.axisLineStyle               = nil;
    y.majorTickLineStyle          = nil;
    y.minorTickLineStyle          = nil;
    y.majorIntervalLength         = CPTDecimalFromString(@"50");
    y.orthogonalCoordinateDecimal = CPTDecimalFromString(@"0");
    y.title                       = @"Y Axis";
    y.titleOffset                 = 45.0f;
    y.titleLocation               = CPTDecimalFromFloat(150.0f);

↑

CPTPlotDataSourceの実装†[edit]

numberOfRecordsForPlotでデータの個数(棒の数)を返す。16を返しているので16個の棒がかかれる。
```
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot
{
    return 16;
}
```

numberForPlot:field:recordIndexはデータを返す。plotが複数存在する場合はその考慮も必要。

-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
    NSDecimalNumber *num = nil;
    //
    if ( [plot isKindOfClass:[CPTBarPlot class]] ) {
        switch ( fieldEnum ) {
            case CPTBarPlotFieldBarLocation:
                //X方向の位置を返す
                num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:index];
                break;
                
            case CPTBarPlotFieldBarTip:
                //棒の高さを返す(サンプルでは機械的に計算してかえしているだけ)
                num = (NSDecimalNumber *)[NSDecimalNumber numberWithUnsignedInteger:(index + 1) * (index + 1)];
                if ( [plot.identifier isEqual:@"Bar Plot 2"] ) {
                    num = [num decimalNumberBySubtracting:[NSDecimalNumber decimalNumberWithString:@"10"]];
                }
                break;
        }
    }
    
    return num;
}