CorePlotで円グラフを描画する

iOSで円グラフを描画する際、ライブラリはCorePlot一択だと思うのでそのメモ。

なぜCorePlotかというと、Githubでさくっと調べた感じ、他に円グラフを描画するために実用的なものはなさそうだったのと、円グラフ以外の描画も出来るのでこのライブラリの使い方を憶えるだけでいいから。

クラス概要

CorePlotを使って円グラフを描画する際に、主に利用するクラスは次の通り。

• CPTGraphHostingView
  • グラフのコンテナの役割をするView
• CPTXYGraph
  • コンテナにグラフ描画するためのGraphのLayer。CPTGraphHostingViewにホストさせる。
• CPTPieChart
  • 円グラフを描画するためのLayer。CPTXYGraphにaddPlotする
• CPTMutableShadow
  • 影の設定を保持するインスタンス。CPTPieChartのshadowプロパティにセット

CPTXYGraphは軸や目盛りのLayer。
CPTPieChartはグラフの方式が円グラフなど表示用Layerになっている。

クラス名で気づいたけど、海外では軸や目盛りなどをグラフと呼び、その中でデータを比較したり表現したりするデータそのものをチャートと呼び分けているのかもしれない。日本人が円グラフや棒グラフと言っているものはチャートであり、そのチャートの下に目盛りとしてグラフがあると。

今回の円グラフ（パイチャート）では縦横の目盛りが存在しないのでCPTXYGraphはほとんど設定がいらない。そのためCorePlotを理解する上で一番簡単かもしれない。

描画

データのグラフ描画のためのデリゲート

UITableViewと同じで描画と管理のためにデータソースのデリゲートパターンを使う。

まずデータソースであるCPTPieChartDataSourceプロトコルはCPTPieChartインスタンスのdataSourceプロパティにdelegateを渡し、下記2つだけをまず実装する。

@protocol CPTPlotDataSource<NSObject>

//プロットのためのデータ数を返すように実装する。必須。
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot;

@optional

//描画するための値をNSNumberで返すように実装する。
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)idx;

@end

CPTPieChartを使っているので、円グラフ専用に下記のメソッドも実装する。

@protocol CPTPieChartDataSource<CPTPlotDataSource>
@optional
//1データ毎に表示をCPTFillというインスタンスで返すように実装する。
-(CPTFill *)sliceFillForPieChart:(CPTPieChart *)pieChart recordIndex:(NSUInteger)idx;

CorePlotによる円グラフでは描画したい領域をCPTFillインスタンスとして返す。これはUITableViewなどでUITableViewCellを返すようなものと思って構わない。

描画する領域は上記のdelegateでCorePlot側が自動で分割してくれるので気にしないでいい。

CPTPieChartDelegateプロトコルのデリゲートについて

ViewControllerにCPTPieChartDelegateプロトコルを採用だけしているサンプルコードがネット上にあるが、これは円グラフが選択された時のイベントのデリゲートなので必要がない場合がほとんどじゃないかと思う。

設定

真ん中が空いた円グラフにする

pieInnerRadiusというプロパティを持っていて、これは円グラフを中心として真ん中の円の半径になる。

    //円グラフのインスタンスを生成
    CPTPieChart *pieChart = [[CPTPieChart alloc] init];
    //円グラフの半径を設定
    pieChart.pieRadius = 52.0;
    //内側の円形の半径
    pieChart.pieInnerRadius = pieChart.pieRadius / 2.0;

完成

カレンダーと組み合わせるとライフログっぽくできる。

実際の動作を確認したい人は「理想的な集中と休憩のサイクルを維持する為のタイマーアプリ。集中作業タイマー」をAppStoreでダウンロードしたら良いのではないかと思います。

集中作業タイマー
https://itunes.apple.com/jp/app/ji-zhong-zuo-yetaima/id547092863?mt=8