ブログトップ 記事一覧 ログイン 無料ブログ開設

電子ガジェットいろいろ このページをアンテナに追加 RSSフィード Twitter

主に自分用に色々なアプリ開発のメモや電子工作や色々な開発関連のメモを書いてます


2015-01-20

Swiftで簡単に折れ線グラフを書く方法

久しぶりにiOS SDKの開発メモです。
今回はSwiftで簡単に折れ線グラフを書く方法を紹介します。
簡単に使えるオープンソースライブラリ BEMSimpleLineGraph を見つけたので、これを使います
BEMSimpleLineGraphはObjective-Cで書かれていますが、Swiftから使う方法を紹介します。

入手場所

BEMSimpleLineGraph
入手先はGitHubです。
どんな方法で入手しても良いですが、今回はこのページにある"Download Zip"ボタンによりZipファイルをダウンロードしました。

プロジェクト作成

今回は簡単に Single View Application で作ります。
プロジェクト名は"TestGraph"とします
f:id:uosoft:20150119224004p:image:w400

ライブラリファイルをプロジェクトに追加

ダウンロードしたZip内のClassesフォルダにあるファイルをプロジェクトに追加します。
今回はLibフォルダを作成して、その中に追加しました
f:id:uosoft:20150119232339p:image:w400

Bridging-Headerの追加

SwiftからObjective-Cのクラスを使うためにBridging-Headerを追加します
ファイル名は"TestGraph-Bridging-Header.h"とします。(<プロジェクト名>-Bridging-Header.h)
このファイルにBEMSimpleLineGraphのimport文を書きます
f:id:uosoft:20150119232337p:image:w400
TestGraph-Bridging-Header.h

#import "BEMSimpleLineGraphView.h"

作成した"TestGraph-Bridging-Header.h"をBuild SettingsのSwift Compiler - Code Generationにある項目 Objective-C Bridge Headerに設定します
f:id:uosoft:20150119232338p:image:w400

グラフ表示

簡単な例として、SampleLabelにX軸のラベル、SampleDataにY軸の値がセットされた要素数がそれぞれ5個の配列を用意して、この値をグラフ表示するコードを"ViewController.swift"へ書きます。
ライブラリの使い方はコード中のコメントを参考にしてください

import UIKit

// BEMSimpleLineGraphDelegateとBEMSimpleLineGraphDataSourceの2つのプロトコルを追加
class ViewController: UIViewController, BEMSimpleLineGraphDelegate, BEMSimpleLineGraphDataSource {
    
    // サンプルラベル
    var SampleLabel: Array<String> = ["ラベルA", "ラベルB", "ラベルD", "ラベルE", "ラベルF"]
    // サンプルデータ
    var SampleData:  Array<Float> = [10.5, 20.8, 5.3, 12.1, 25.9]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // グラフのViewを作成(今回はメインビューと同じ大きさのビューを作ります)
        var GraphView: BEMSimpleLineGraphView = BEMSimpleLineGraphView(frame: CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height))
        // データソースを設定 (今回はこのクラスの中にメソッドを書くので、selfを設定)
        GraphView.dataSource = self
        // delegateを設定 (今回はこのクラスの中にメソッドを書くので、selfを設定)
        GraphView.delegate = self
        // メインビューにグラフのViewを追加
        self.view.addSubview(GraphView)
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // グラフのX軸の最大個数を返すメソッドを作成
    func numberOfPointsInLineGraph(graph: BEMSimpleLineGraphView) -> NSInteger {
        // 今回はSampleData配列の数を返します
        return SampleData.count
    }
    
    // Y軸の値を返すメソッドを作成
    func lineGraph(graph: BEMSimpleLineGraphView, valueForPointAtIndex index: NSInteger) -> CGFloat {
        //何個目のX軸のポイントかはindexで取得できるので、今回はSampleData配列の中にあるindexの要素をそのまま返します
        return CGFloat(SampleData[index])
    }
    
    // X軸のラベルを返すメソッドを作成
    func lineGraph(graph: BEMSimpleLineGraphView, labelOnXAxisForIndex index: NSInteger) -> NSString {
        //何個目のX軸のポイントかはindexで取得できるので、今回はSampleLabel配列の中にあるindexの要素をそのまま返します
        return NSString(string: SampleLabel[index])
    }
    
}


これで下のように表示されます
f:id:uosoft:20150120000647p:image:w200

グラフオブジェクトに対して下のような設定プロパティがあります


colorTop: UIColorグラフViewの上部の色
colorBottom: UIColorグラフViewの下部の色
colorLine: UIColor各ポイントを結んだ線の色
colorXaxisLabel: UIColorX軸のラベルの文字の色
colorYaxisLabel: UIColorY軸のラベルの文字の色
widthLine: CGFloat各ポイントを結んだ線の太さ
enableTouchReport: BoolGraphViewのタッチイベントを取得するかどうか
enablePopUpReport: Bool画面をタッチした時に値をポップアップで表示するか
enableBezierCurve: Bool各ポイントを結ぶ線を滑らかに表示するか
enableYAxisLabel: BoolY軸のラベルを表示するか
autoScaleYAxis: BoolY軸をViewの高さに合わせてスケールするか
alwaysDisplayDots: Bool各ポイントを常に表示するか
enableReferenceAxisFrame: BoolX, Y軸のフレーム(外枠)を表示するか
enableReferenceAxisLines: BoolX, Y軸の補助線を表示するか
animationGraphStyle: BEMLineAnimation表示するときのアニメーション

いくつか設定してみた例です。

        // GraphView.delegate = self の次の行から以下を追加した例
        GraphView.enableYAxisLabel = true
        GraphView.enableXAxisLabel = true
        GraphView.enableReferenceAxisFrame = true
        GraphView.enableReferenceXAxisLines = true
        GraphView.enableReferenceYAxisLines = true
        GraphView.enableBezierCurve = false
        GraphView.widthLine = 2
        GraphView.colorLine = UIColor.orangeColor()
        GraphView.colorTop = UIColor.whiteColor()
        GraphView.colorBottom = UIColor.whiteColor()

表示してみました
f:id:uosoft:20150120000648p:image:w200

このように非常に簡単に扱えるので、ちょっとした折れ線グラフを描きたいときに便利です。

詳解 Swift

詳解 Swift

kojikoji 2015/01/22 15:52 使ってみました。簡単でした。
次のバージョンでは複数のグラフが描けるようですので期待しています。

uosoftuosoft 2015/01/24 00:08 試していただき、ありがとうございます。
今のところ一番簡単に扱えるライブラリなので、今後に期待ですね

123da---123da--- 2015/05/10 13:26 すみません。本当に初心者でして、、Y軸の値を任意で設定するにはどこをいじれば宜しいのでしょうか?

123da---123da--- 2015/05/11 22:37 上記のViewController.swiftを実行する時、なぜかエラーが表示されてしまい、確認したところ、NSStringをStringに替えたら、無事、実行できました。Y軸の設定も解りました。

uosoftuosoft 2015/05/12 09:58 このブログを参考にしていただき、ありがとうございます。
解決できてよかったです

tomatonictomatonic 2015/05/17 23:00 初めまして。こちらを参考にグラフ描画に挑戦しています。
すぐ上の123da--さんも質問されていますが、
>上記のViewController.swiftを実行する時、なぜかエラーが表示されてしまい
の部分、X軸のラベルを返すメソッドを作成の箇所でエラーが出てつまづいています。
Xcode Version 6.3.1なのですが修正方法をご教示頂けないでしょうか。

tomatonictomatonic 2015/05/31 13:46 追記です。
cocoapodsより「BEMSimpleLineGraph (3.3)」を導入し、「project名.xcworkspace」から開く。
コンパイルするとやはりx軸のラベルを返すメソッドで同様のエラーが発生します。
x軸のラベルを返すメソッドをコメントアウトするとコンパイルは通ります。

エラー内容
--
Objective-C method 'lineGraph:labelOnXAxisForIndex:' provided by method 'lineGraph(_:labelOnXAxisForIndex:)' conflicts with optional requirement method 'lineGraph(_:labelOnXAxisForIndex:)' in protocol 'BEMSimpleLineGraphDataSource'
Objective-C method 'lineGraph:labelOnXAxisForIndex:' provided by method 'lineGraph(_:labelOnXAxisForIndex:)' conflicts with optional requirement method 'lineGraph(_:labelOnXAxisForIndex:)' in protocol 'BEMSimpleLineGraphDelegate'
--

どうやら'BEMSimpleLineGraphDelegate' と 'BEMSimpleLineGraphDelegate'で競合を起こしているらしいのです。
現在、自力で解決できるように1から勉強中です。進展しましたらまた追記させて頂きます。

tomatonictomatonic 2015/05/31 13:48 一点記載ミス。
'BEMSimpleLineGraphDataSource'と'BEMSimpleLineGraphDelegate'で競合を起こしている…の間違いでした。
失礼しました。

natnat 2016/02/12 16:22 x軸のラベルが説明例のように表示されません。一つも表示されず、グラフの高さを画面の半分ほどの大きさにすると表示されました
調べましたが記事が少なく詰まってしまいました・・・
アドバイスいただけないでしょうか

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/uosoft/20150120/1421681298
リンク元