Swiftによる折れ線グラフのサイズ変更

###前提・実現したいこと
【問題】
心電図のグラフを作成するアプリケーションを作成しています。心電図のグラフを表示させるところまではなんとか実装できました。しかし、グラフの表示のされ方に問題があります。
上記の図がアプリの構成画面かつ現状のグラフになります。自分としましては、縦軸のメモリを0から表示させ縦軸と横軸を表示させたいと思っています。（グラフはスクロールするとどんどん違う日の心電図が表示されるようになります。）

【開発フロー】
①Scrollable-GraphViewというライブラリを参照しコードを実装。
②clipsToBoundsを用いグラフのサイズを抑える。
③グラフの表示のされ方に問題発生！（今ここ←）

###発生している問題・エラーメッセージ

class EcgDailyViewController: UIViewController {
    
    @IBOutlet weak var ecgGraph: UIView!
    
    var graphView = ScrollableGraphView()
    var label = UILabel()
    let numberOfDataItems = 29
    lazy var data: [Double] = self.generateRandomData(self.numberOfDataItems, max: 50)
    lazy var labels: [String] = self.generateSequentialLabels(self.numberOfDataItems, text: "Time")
    
    
//変更点有り
    override func viewDidLoad() {
        super.viewDidLoad()
        print(self.ecgGraph.bounds.width)
        print(self.ecgGraph.bounds.height)
//        graphView = ScrollableGraphView(frame: self.view.frame)
//        graphView = createDarkGraph(self.view.frame)
        createDarkGraph()
        
        graphView.set(data: data, withLabels: labels)
        self.ecgGraph.clipsToBounds = true
        self.ecgGraph.addSubview(graphView)
        
    }
    
//変更点有り
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        //サイズ設定
        let rect = CGRect(x:0, y:0, width:ecgGraph.frame.width, height:ecgGraph.frame.height) //Swift3.0
        graphView.frame = rect
    }

//変更点有り
    fileprivate func createDarkGraph() {
//        let graphView = ScrollableGraphView(frame: frame)
        
        graphView.backgroundFillColor = UIColor.colorFromHex(hexString: "#333333")
        
        graphView.lineWidth = 1
        graphView.lineColor = UIColor.colorFromHex(hexString: "#777777")
        graphView.lineStyle = ScrollableGraphViewLineStyle.smooth
        
        graphView.shouldFill = true
        graphView.fillType = ScrollableGraphViewFillType.gradient
        graphView.fillColor = UIColor.colorFromHex(hexString: "#555555")
        graphView.fillGradientType = ScrollableGraphViewGradientType.linear
        graphView.fillGradientStartColor = UIColor.colorFromHex(hexString: "#555555")
        graphView.fillGradientEndColor = UIColor.colorFromHex(hexString: "#444444")
        
        graphView.dataPointSpacing = 80 //40にしても同じく拡大状況
        graphView.dataPointSize = 2
        graphView.dataPointFillColor = UIColor.white
        
        graphView.referenceLineLabelFont = UIFont.boldSystemFont(ofSize: 8)
        graphView.referenceLineColor = UIColor.white.withAlphaComponent(0.2)
        graphView.referenceLineLabelColor = UIColor.white
        graphView.numberOfIntermediateReferenceLines = 5
        graphView.dataPointLabelColor = UIColor.white.withAlphaComponent(0.5)
        
        graphView.shouldAnimateOnStartup = true
        graphView.shouldAdaptRange = true
        graphView.adaptAnimationType = ScrollableGraphViewAnimationType.elastic
        graphView.animationDuration = 1.5
        graphView.rangeMax = 50
        graphView.shouldRangeAlwaysStartAtZero = true
        
//        graphView.setNeedsDisplay()
        return
//        return graphView
    }
    
    private func generateRandomData(_ numberOfItems: Int, max: Double) -> [Double] {
        var data = [Double]()
        for _ in 0 ..< numberOfItems {
            var randomNumber = Double(arc4random()).truncatingRemainder(dividingBy: max)
            
            if(arc4random() % 100 < 10) {
                randomNumber *= 3
            }
            
            data.append(randomNumber)
        }
        return data
    }
    private func generateSequentialLabels(_ numberOfItems: Int, text: String) -> [String] {
        var labels = [String]()
        for i in 0 ..< numberOfItems {
            labels.append("\(text) \(i+1)")
        }
        return labels
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

}


###該当のソースコード

###試したこと
setNeedsLayoutを使ってみるも良く分からず中断してしまいました。

###補足情報(言語/FW/ツール等のバージョンなど)
Swift3で開発しております。何卒ご回答宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

今のコードだと、画面一杯に作成したグラフの一部分が、clipsToBoundsによる「窓」から見えている状態ですよね？そうではなくて、ecgGraph一杯にグラフを表示したいのだと思いますので、graphViewにはecgGraphのサイズを設定してやらないといけません。

また、viewDidLoad()の時点ではレイアウトが確定していませんので、サイズ設定はviewDidLayoutSubviews()で行わないといけません。

あと、graphViewがアチコチで生成されていますが、変数定義のところで作成しているので、以降、作成し直す必要はありません。

以上をまとめると、

swift
1override func viewDidLoad() {
2    super.viewDidLoad()
3        
4    //グラフ設定
5    setupDarkGraph() //※関数名変えました
6    //データセット
7    graphView.setData(data, withLabels: labels)
8    //viewに追加
9    self.ecgGraph.addSubview(graphView)
10}
11
12override func viewDidLayoutSubviews() {
13    super.viewDidLayoutSubviews()
14        
15    //サイズ設定
16    let rect = CGRectMake(0, 0, CGRectGetWidth(ecgGraph.frame), CGRectGetHeight(ecgGraph.frame))
17    graphView.frame = rect
18}
19
20func setupDarkGraph() { //※引数も返値も不要 & 関数名変えました
21    //let graphView = ScrollableGraphView(frame: frame) ※不要
22    :
23    (中略)
24    :
25    //graphView.setNeedsDisplay() //※不要
26        
27    return
28}