「RealmSwift」タグアーカイブ

【swift】グラフが描ける外部ライブラリ「iOS-Charts」を試してみる

こんにちは。シンです。コードを書くときはいつもハワイアンかレゲェを聴いています。これを聴いているとすると南の島でノンビリとコーディングしている気持ちになりとってもハッピーになれるからです。

さて、今日はグラフが描ける外部ライブラリ「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() {

        //データ配列を定義・・・(1)
        var dataEntries: [BarChartDataEntry] = []

        //データベースから取得
        let visitorCounts = getVisitorCountsFromDatabase()
        
        // 取得したデータを(1)のデータ配列に設定
        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ファイルを削除してください。削除の方法はこちらの記事をこ覧ください。

ちゃんとデータベースにも登録されていますね。

今日はここまで。次回はグラフの種類を円グラフに変更したいと思います。