最終更新日：2017‐04-30
こんにちは。コードを書くときはいつもハワイアンかレゲェを聴いています。聴いているとすると南の島でノンビリとコーディングしている気持ちになりとってもハッピーになれるからです。
さて、今日はグラフが描ける外部ライブラリ「Charts」を試してみます。先日覚えた、「RealmSwift」と合わせて使えるようなので、これはかなり使えそうです。
githubを確認します
githubのURLはこちら。どんなグラフの種類が作成できるか確認できる画像もありますので、一読されると良いと思います。
https://github.com/danielgindi/Charts
さらに読み進めると、「Chart」＋「RealmSwift」の導入まで丁寧に解説いただいているページのURLがありますので、ありがたく拝見します。ありがたや、ありがたや。ナムナム…。
https://medium.com/@skoli/using-realm-and-charts-with-swift-3-in-ios-10-40c42e3838c0
では、早速やっていきます。
まずはcocoapodで初期化を。
いつもの通り適当にXcodeでプロジェクトを適当に作ったあと、一旦プロジェクトを閉じてターミナルを開きます。そして、プロジェクトを作ったディレクトリに移動し、おもむろに
pod init
を打ちます。するとPodfileが作成されていますので、これをViなどで編集します。
お手本は
https://medium.com/@skoli/using-realm-and-charts-with-swift-3-in-ios-10-40c42e3838c0
に掲載されておりますので参考にします。
# Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'DemoChart' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for DemoChart pod 'Charts', :git => 'https://github.com/danielgindi/Charts.git',:branch =>'master' pod 'RealmSwift', '~> 2.0.2' post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '3.0' end end end end
編集が終わったら
pod install
実行結果はこんな感じです。
$ pod install Analyzing dependencies Pre-downloading: `Charts` from `https://github.com/danielgindi/Charts.git`, branch `master` Downloading dependencies Installing Charts (3.0.2) Installing Realm (2.0.4) Installing RealmSwift (2.0.4) Generating Pods project Integrating client project [!] Please close any current Xcode sessions and use `DemoChartSwift.xcworkspace` for this project from now on. Sending stats Pod installation complete! There are 2 dependencies from the Podfile and 3 total pods installed. [!] Automatically assigning platform ios with version 10.0 on target DemoChartSwift because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
「Pod installation complete!」の文字を見つけたら、「DemoChartSwift.xcworkspace」を開きます。また、Pods > Products の配下にフレームワークが入っていることを確認します。
ここで、おおむね環境が整ったので、一旦ビルドして成功するかを確認します。ビルトが成功していたら次のステップへ。
StoryBoardでオブジェクトを配置します。
「Button」・「TextField」・「View」を配置します。
プログラムへ紐付け
「View」と「TextField」は
@IBOutlet weak var tfValue: UITextField!
@IBOutlet weak var barView: BarChartView!に紐付けます。「Button」は
@IBAction func btnAddTapped(_ sender: AnyObject)
へ紐付けます。紐付けるときは「Control」キー＋ドラッグ＆ドロップで「ViewController.swift」へ落とします。※「Control」キー＋ドラッグ＆ドロップでできない場合は、右クリック（トラックパッドの場合は2本指でタップ）してドロップします。
※注意！
https://medium.com/@skoli/using-realm-and-charts-with-swift-3-in-ios-10-40c42e3838c0
では、プロパティー「barView」について、オブジェクトの紐付けが細かく解説されていませんが、
テキストフィールドと同じようにCtrl+ドラッグ＆ドロップして、同じように紐付けしておきます。
内部処理のプログラムを書きます。
//
// ViewController.swift
// DemoChartSwift
//
//
import UIKit
//Charts、RealmSwiftを使えるようにインポート
import Charts
import RealmSwift
class ViewController: UIViewController {
@IBOutlet weak var tfValue: UITextField!
@IBOutlet weak var barView: BarChartView!
/// ロードされた時に呼ばれます
override func viewDidLoad() {
super.viewDidLoad()
//チャートをアップデート
updateChartWithData()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
/// 「追加ボタン」タップ時
///
/// - parameter sender: <#sender description#>
@IBAction func btnAddTapped(_ sender: AnyObject) {
if let value = tfValue.text , value != "" {
//VisitorCoundインスタンスを作成
let visitorCount = VisitorCount()
//カウント値をテキストフィールドから取得して設定
visitorCount.count = (NumberFormatter().number(from: value)?.intValue)!
//保存
visitorCount.save()
//テキストフィールドを空にする
tfValue.text = ""
}
//チャートをアップデート
updateChartWithData()
}
/// チャート更新
func updateChartWithData() {
//データ配列を定義・・・（１）
var dataEntries: [BarChartDataEntry] = []
//データベースから取得
let visitorCounts = getVisitorCountsFromDatabase()
// 取得したデータを（１）のデータ配列に設定
for i in 0..<visitorCounts.count {
let dataEntry = BarChartDataEntry(x: Double(i), y: Double(visitorCounts[i].count))
dataEntries.append(dataEntry)
}
// チャート情報にラベルとデータを設定
let chartDataSet = BarChartDataSet(values: dataEntries, label: "訪問者数")
let chartData = BarChartData(dataSet: chartDataSet)
// viewにチャートデータを設定
barView.data = chartData
}
/// データベース（RealmSwift）からVisitorCountsのデータを取得する
///
/// - returns: <#return value description#>
func getVisitorCountsFromDatabase() -> Results<VisitorCount> {
do {
let realm = try Realm()
return realm.objects(VisitorCount.self)
} catch let error as NSError {
fatalError(error.localizedDescription)
}
}
}
//
// VisitorCount.swift
// DemoChartSwift
//
import Foundation
import RealmSwift
class VisitorCount : Object {
dynamic var date : Date = Date()
dynamic var count : Int = Int(0)
func save() {
do {
let realm = try Realm()
try realm.write {
realm.add(self)
}
} catch let error as NSError {
fatalError(error.localizedDescription)
}
}
}ビルドして、ビルドエラーがなければ動かします
ほらできた。THX！Sami Korpela！
念のため、Realmのデータベースの状態を確認
「find ./ -name default.realm -ls」を行って、今日更新されている「default.realm」ファイルを探します。そしてそのファイルをオープンします。
$ find ./ -name default.realm -ls 19470372 8 -rw-r--r-- 1 hoge staff 4096 4 30 07:34 .//Library/Developer/CoreSimulator/Devices/8D7F0311-0F41-4552-B185-E8CEE6C28758/data/Containers/Data/Application/0398E3D7-A1D7-41F8-B7D0-249A22EAC49F/Documents/default.realm find: .//Library/Saved Application State/com.bitrock.appinstaller.savedState: Permission denied $open .//Library/Developer/CoreSimulator/Devices/8D7F0311-0F41-4552-B185-E8CEE6C28758/data/Containers/Data/Application/0398E3D7-A1D7-41F8-B7D0-249A22EAC49F/Documents/default.realm
※フォーマットが古いというような警告が出ますが、アップデートしないと以下の画面へはたどりつけません。しかし、アップデートしてしまうと「Unsupported Realm file format version.」となり、エラーになってしまいますのでご注意を。この場合、該当のdefault.Realmファイルを削除してください。削除の方法はこちらの記事をこ覧ください。
ちゃんとデータベースにも登録されていますね。
今日はここまで。次回はグラフの種類を円グラフに変更したいと思います。
技術の進化についていけていないシステムエンジニア。浅く広く、何でも大体はこなせるエンジニアで重宝されてる（つもり）。でもやっぱり特化した武器欲しい。
備忘録として記事を投稿していますが、少しでも誰かの助けになればと思います。
最近はプロジェクトでReact（TypeScript ）を触っています。
趣味でギター弾きます。