CocoaPodsにグラフ描画のライブラリがあったので使ってみました。

ライセンスもMITなので、自由に使えるかと。

完成品はこんな感じになります。

ScreenShot71

ちなみに値はランダムに出してます。

このライブラリで出来ないことやろうとするなら独自で開発した方がいいのかなと思いました。

サンプルも作りましたので、よかったらインストールして確認してみてください。

NinjaAdMax / SampleSimpleLineGraph

では色々紹介していきます。

BEMSimpleLineGraph

今回使ったライブラリはBEMSimpleLineGraphになります。

ScreenShot72

Boris-Em/BEMSimpleLineGraph

datasourcedelegateを用意してやるだけなので、そこまで使うのに苦労しません。

このライブラリはCocoaPodsでインストール出来るのでそちらを使いました。

Podfile

README.mdにも書いてありますが、一応参考までに

1
2
3
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '7.0'
pod 'BEMSimpleLineGraph'

これでpod installで導入が出来ます。

使い方

Storyboard上でUIViewController上にUIViewを乗っけてください。

乗っけたUIViewclass typeBEMSimpleLineGraphViewに変更してください。

UIViewUIViewControllerIBOutletとしてリンクしてください。

ソースコードで生成する場合は以下のようになります。

1
2
3
4
5
6
7
8
#import <BEMSimpleLineGraph/BEMSimpleLineGraphView.h>
~色々省略~
- (void)viewDidLoad {
BEMSimpleLineGraphView *graphView = [[BEMSimpleLineGraphView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)];
graphView.delegate = self;
graphView.datasource = self;
[self.view addSubView:graphView];
}

という至って普通のViewの追加方法です。

必須のDelegate / DataSource メソッド

2つのメソッドは@requiredとなっているので絶対に実装しなければなりません。

- (NSInteger)numberOfPointsInLineGraph:(BEMSimpleLineGraphView *)graph;

グラフに表示するポイントがいくつかを返すメソッドになります。

多分配列で表示したい値を管理していると思うので、self.values.countみたいに返却すれば大丈夫かと。

- (NSInteger)lineGraph:(BEMSimpleLineGraphView *)graph valueForPointAtIndex:(NSInteger)index;

各ポイント(index)の値を返却します。

その他設定

これくらい設定できる値があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 仮置きです
self.lineGrapView = [[BEMSimpleGraphView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)];
// グラフViewの上部の色
self.lineGraphView.colorTop(UIColor)
// グラフViewの下部の色
self.lineGraphView.colorBottom(UIColor)
// 各ポイントを結んだ線の色
self.lineGraphView.colorLine(UIColor)
// X軸のラベルの文字の色
self.lineGraphView.colorXaxisLabel(UIColor)
// Y軸のラベルの文字の色
self.lineGraphView.colorYaxisLabel(UIColor)
// 各ポイントを結んだ線の太さ
self.lineGraphView.widthLine(CGFloat)
// GraphViewのタッチイベントを取得するかどうか
self.lineGraphView.enableTouchReport(BOOL)
// 画面をタッチした時に値をポップアップで表示するか
self.lineGraphView.enablePopUpReport(BOOL)
// 各ポイントを結ぶ線を滑らかに表示するか
self.lineGraphView.enableBezierCurve(BOOL)
// Y軸のラベルを表示するか
self.lineGraphView.enableYAxisLabel(BOOL)
// Y軸をViewの高さに合わせてスケールするか
self.lineGraphView.autoScaleYAxis(BOOL)
// 各ポイントを常に表示するか
self.lineGraphView.alwaysDisplayDots(BOOL)
// X, Y軸のフレーム(外枠)を表示するか
self.lineGraphView.enableReferenceAxisFrame(BOOL)
// X, Y軸の補助線を表示するか
self.lineGraphView.enableReferenceAxisLines(BOOL)
// 表示するときのアニメーション
self.lineGraphView.animationGraphStyle(BEMLineAnimation)
// BEMLineAnimationDraw = (BEMLineAnimationDraw|BEMLineAnimationFade|BEMLineAnimationNone)

という感じです。

enableBezierCurveNOに設定すると以下のような表示になります。

ScreenShot73

ちなみに今回作ったサンプルはUIで値を操作できるようにしたので、簡単に値を変更できて効果も確かめられるように作りました。

使った感想

大体はこのライブラリで表示出来るんじゃないかなと思いました。

むしろこのライブラリで出来ないことをやろうとすると、画面内がごちゃごちゃしちゃってかえってみづらくなってしまうだろうなという印象を持ちました。

こいつをUITableViewHeaderViewにおいて、TableViewCellに表示した値の合計値とかを表示すればすっきりするのではないでしょうか。

終わりに

久しぶりにUIパーツをいじってみました。

とっても楽しかったです。

以上になります。