読者です 読者をやめる 読者になる 読者になる

ニペブ - iPhone / iOSアプリ開発

iPhone / iOS アプリ開発方法と技術情報、入門レベルの初心者向けの記事を書いています。

(iOS/iPhoneアプリ開発) グラフ描画ライブラリ CorePlot で円グラフを描く

完成イメージ

円グラフ が表示され、ラベルが表示されています。
f:id:nipe880324:20131122221014p:plain:w320

環境

xcodeのプロジェクトにCorePlotを導入する

次のサイト参考にして、導入しました。
core-plotでグラフを描いてみよう。-入門編- | Developers.IO
現在は「Downloads -> CorePlot_1.4.zip」でした。

円グラフの実装する

まずは、ViewContorller.h を作成します。
CorePlotのヘッダを追加し、必要な変数を宣言しておきます。

//
//  PieChartViewController.h
//  TestCorePlot
//
//  Created by shojiro yanagisawa on 11/22/13.
//  Copyright (c) 2013 shojiro yanagisawa. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "CorePlot-CocoaTouch.h"

@interface PieChartViewController : UIViewController
<CPTPieChartDataSource, CPTPieChartDelegate>
{
    @private
    // グラフ表示領域(この領域に円グラフを追加する)
    CPTGraph *graph;
    // 円グラフで表示するデータを保持する配列
    NSMutableArray *dataForChart;
}
@property (readwrite, nonatomic) NSMutableArray *pieChartData;

@end


次に、ViewController.m を作成します。
細かくコメントを記載してますのでそれを見れば大体分かると思います。
PieChart(円グラフクラス)の基本的なデータソースとデリゲートも実装しています。

//
//  PieChartViewController.m
//  TestCorePlot
//
//  Created by shojiro yanagisawa on 11/22/13.
//  Copyright (c) 2013 shojiro yanagisawa. All rights reserved.
//

#import "PieChartViewController.h"

@interface PieChartViewController ()

@end

@implementation PieChartViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    // グラフに表示するデータを生成
    // 40%, 30%, 20%, 10%の4項目の円グラフのデータ
    self.pieChartData = [NSMutableArray arrayWithObjects:
                         [NSNumber numberWithDouble:40.0],
                         [NSNumber numberWithDouble:30.0],
                         [NSNumber numberWithDouble:20.0],
                         [NSNumber numberWithDouble:10.0],
                         nil];
    
    // ホスティングビューを生成
    CPTGraphHostingView *hostingView =
        [[CPTGraphHostingView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
    
    // グラフを生成
    graph = [[CPTXYGraph alloc] initWithFrame:hostingView.bounds];
    hostingView.hostedGraph = graph;
    
    // グラフの名前を設定
    graph.title          = @"Graph Title";

    // 今回は円グラフなので、グラフの軸は使用しない
    graph.axisSet = nil;
    
    // 円グラフのインスタンスを生成
    CPTPieChart *pieChart = [[CPTPieChart alloc] init];
    
    // 円グラフの半径
    pieChart.pieRadius = 80.0;
    
    // データソースとデリゲートを設定
    pieChart.dataSource = self;
    pieChart.delegate = self;
    
    // グラフに円グラフを追加
    [graph addPlot:pieChart];
 
    // 画面にホスティングビューを追加
    [self.view addSubview:hostingView];
}

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


#pragma mark -
#pragma mark Plot Data Source Methods

// グラフに使用するデータの数を返す
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot
{
    return [self.pieChartData count];
}

// グラフに使用するデータの値を返す
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
    return [self.pieChartData objectAtIndex:index];
}

// グラフの各項目にラベルをつける
-(CPTLayer *)dataLabelForPlot:(CPTPlot *)plot recordIndex:(NSUInteger)index
{
    CPTTextLayer *label            = [[CPTTextLayer alloc] initWithText:[NSString stringWithFormat:@"index: %lu", (unsigned long)index]];
    CPTMutableTextStyle *textStyle = [label.textStyle mutableCopy];
    
    textStyle.color = [CPTColor lightGrayColor];
    label.textStyle = textStyle;
    return label;
}

// 円グラフの中心からoffset値だけ外側に項目を切り出す
-(CGFloat)radialOffsetForPieChart:(CPTPieChart *)piePlot recordIndex:(NSUInteger)index
{
    CGFloat offset = 0.0;
    
    if ( index == 0 ) {
        offset = piePlot.pieRadius / 8.0;
    }

    return offset;
}

#pragma mark Delegate Methods
// 円グラフの各項目をタップしたときのイベント
-(void)pieChart:(CPTPieChart *)plot sliceWasSelectedAtRecordIndex:(NSUInteger)index
{
    // グラフタイトルにタップされた各項目のインデックス番号を設定
    graph.title = [NSString stringWithFormat:@"Selected index: %lu", (unsigned long)index];
}

@end

円グラフなどCorePlotのサンプルのソースコードGithubに置いてあります。よろしければ、覗いてみてください。
yanagi0324/test-core-plot · GitHub

参考文献

  • 円グラフクラス(PieChart)の公式ドキュメント Core Plot (iOS): CPTPieChart Class Reference


分かりづらい箇所やご質問などありましたら、 コメントやメールアドレスにご連絡いただけると嬉しいです。