アプリ開発『WeightControl』vol.24 タブバーアプリケーションでCore-Plotによる折れ線グラフを描画する方法
グラフ描画について引き続き頭を悩ませていますが、前回PNChartというライブラリを使うことにしました！！ と、宣言しておきながら、最終的にはCore-Plotというライブラリで描画することになりました。
なぜかというと、PNChartのカスタマイズが難しいことがわかったからです。（難しいというよりは、ネット上にPNChartに関する記事が海外含めてほとんど無い）
そこで、今回はCore-Plotでのグラフ描画を下記サイトを参考にしながらやってみました。とてもわかりやすく、結構カスタマイズしやすいです。
iPhoneアプリ開発でよく使われているグラフ描画ライブラリ『CorePlot』でiPhoneアプリで折れ線グラフを描く - プログラミング技術メモとちょっことアプリ開発メモ
ただし、僕は今回タブバーアプリケーションを作っているのですが、上記サイトではviewDidLoad内にコードを書いているため、タブバーではグラフに載るべきデータを修正してもアプリ起動時しかグラフが描画されないので、viewDidAppear内に書く必要がありました。
しかし、それだけだとタブを他のタブに切り替えてからまた戻ってくると、最初に描画されたグラフと同時に、新たに描画されるグラフも重なって表示されてしまいます。viewDidAppearなので、タブを開く度に一本ずつ表示されるグラフが増えてく感じになってしまうからです。また、Y軸やX軸のラベルも更新前のものの上に更新後のものが重なって表示されてしまいます。
これを避けるためには、ホスティングビューとグラフの生成、追加をviewDidLoad内で行うことで、グラフの生成がアプリ起動時の一回だけになることから、タブを切り替えた時にラベルが重ならないようにすることができます。下記サイトを参考にしました。
ios - Core Plot 1.0 how to implement reloadData method? - Stack Overflow
つまり、viewDidLoadのコードは下記のようになります。
---------------------------------
- (void)viewDidLoad
{
[superviewDidLoad];
// ホスティングビューを生成、画面に追加
CPTGraphHostingView *hostingView = [[CPTGraphHostingViewalloc] initWithFrame:CGRectMake(0, 0, 320, 400)];
[self.view addSubview:hostingView];
// グラフを生成、ホスティングビューに追加
graph = [[CPTXYGraph alloc] initWithFrame:hostingView.bounds];
hostingView.hostedGraph = graph;
}
---------------------------------
さらに、viewDidAppear内にはグラフに関するデータがごっそり残っているのですが、タブを開く（開き直す）度に最新のデータが反映するように更新しなくてはならないので、ここのサイトの情報を見てviewWillDisappearメソッドを追加しました。
- (void)viewWillDisappear:(BOOL)animated
{
[superviewWillDisappear:animated];
hostingView.hostedGraph = nil;
[scatterPlotData removeAllObjects];
}
本来はreloadDataメソッドを使って更新するらしいのですが、ちょっといろいろ試してみても更新成功することができなかったので、この方法を採用しました。
タブバーアプリケーションでCore-Plotによるグラフ描画を行う場合、viewDidLoad とviewDidAppearに分けてコードを書かなくてはならないということがミソなんですね。
例えば、僕はここのサイトを参考にしましたが、そこのviewDidLoad内に書かれているコードのうち、以下の部分のみは切り取って、viewDidLoad内に貼り付ける必要がありました。
---------------------------------
// ホスティングビューを生成
CPTGraphHostingView *hostingView =
[[CPTGraphHostingView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
// 画面にホスティングビューを追加
[self.view addSubview:hostingView];
// グラフを生成
graph = [[CPTXYGraph alloc] initWithFrame:hostingView.bounds];
hostingView.hostedGraph = graph;
---------------------------------
これで、タブバーアプリケーションでもCore-Plotでグラフ描画が正しくできるようになりました！
Y軸は体重になっていますが、次回からはX軸を日付にしたいと思います。（体重値はランダム生成しています 笑）今は日付にすることを想定して、30日分のメモリを入れている状態です。
