折れ線グラフについて(ios-charts)

swift
1import UIKit
2import Charts
3
4class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
5    
6    @IBOutlet weak var weight: UITextField!
7    @IBOutlet weak var bodyfat: UITextField!
8    @IBOutlet weak var chtChart: LineChartView!
9    @IBOutlet weak var chartssegment: UISegmentedControl!
10    @IBOutlet weak var mytableView: UITableView!
11    var numbers : [Double] = []
12    var bfpnumbers : [Double] = []
13    var item = String()
14    
15    var dete = NSDate()
16    
17    @IBAction func okBtr(_ sender: Any) {
18        let input = Double(weight.text!)
19        let output = Double(bodyfat.text!)
20        
21        numbers.append(input!) //here we add the data to the array.
22        bfpnumbers.append(output!)
23        
24        updateGraph()
25        item.append("(numbers)" + "(bfpnumbers)")
26        mytableView.reloadData()
27        weight.text = ""
28        bodyfat.text = ""
29    }
30    
31    func updateGraph(){
32        var lineChartEntry  = [ChartDataEntry]()
33        
34        for i in 0..<numbers.count {
35    
36            let value = ChartDataEntry(x: Double(i), y: numbers[i])
37        
38            //Y軸の右側の値について
39            chtChart.rightAxis.enabled = true
40            //chtChart.leftAxis.drawGridLinesEnabled = false
41            
42            lineChartEntry.append(value)
43
44        
45        }
46        
47        for i in 0..<bfpnumbers.count {
48            
49            let value2 = ChartDataEntry(x: Double(i), y: bfpnumbers[i])
50            
51            //Y軸の右側の値について
52            chtChart.rightAxis.enabled = true
53            //chtChart.leftAxis.drawGridLinesEnabled = false
54            
55            lineChartEntry.append(value2)
56            
57        }
58        //横軸を非表示
59        chtChart.xAxis.enabled = false
60        let line1 = LineChartDataSet(values: lineChartEntry, label: "円相場")
61        line1.colors = [NSUIColor.blue]
62        
63        let line2 = LineChartDataSet(values: lineChartEntry, label: "ドル相場")
64        line2.colors = [NSUIColor.red]
65        
66        let data = LineChartData()
67        data.addDataSet(line1)
68        data.addDataSet(line2)
69        
70        chtChart.data = data
71        chtChart.chartDescription?.text = "My awesome chart"
72        
73    }
74    
75    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
76        return numbers.count
77    }
78    
79    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
80        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
81        
82        let dateFormatter = DateFormatter()
83        dateFormatter.locale = NSLocale(localeIdentifier: "en_US") as Locale? // ロケールの設定
84        dateFormatter.dateFormat = "yyyy/MM/dd  "//:ss" // 日付フォーマットの設定
85        
86        let dateString = dateFormatter.string(from: dete as Date)
87        print(dateString) // -> 2014/06/25 02:13:18*/
88        
89        let str = String("(numbers)" + "(bfpnumbers)")
90        
91        cell.textLabel?.text = dateString + ("(numbers[indexPath.row]) " + "¥  " +  "(bfpnumbers[indexPath.row])") + " $"//str.description
92        
93        if numbers.count > 2 {
94            numbers.remove(at: indexPath.row)
95            mytableView.reloadData()
96        }
97        
98        print(str)
99        return cell
100    }
101    
102    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
103        return 40
104    }
105    
106    func tableView(_ tableView: UITableView,
107                   trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
108        guard indexPath.row % 2 == 0 else { return UISwipeActionsConfiguration(actions: []) }
109        
110        let deleteAction = UIContextualAction(style: .destructive, title: "Delete")
111        { action, view, completionHandler in
112            self.numbers.remove(at: indexPath.row)
113            self.bfpnumbers.remove(at: indexPath.row)
114            self.mytableView.reloadData()
115            completionHandler(true)
116        }
117        
118        let edit = UIContextualAction(style: .normal,title: "edit", handler:
119        { (action: UIContextualAction, view: UIView, success :(Bool) -> Void) in
120            //self.showTextFieldAlert(.titleEdit, index: indexPath.section)
121            success(true)
122        })
123        
124        edit.backgroundColor = .blue
125        let config = UISwipeActionsConfiguration(actions: [deleteAction,edit])
126        config.performsFirstActionWithFullSwipe = false
127        return config
128    }
129    
130    override func viewDidLoad() {
131        super.viewDidLoad()
132        
133        mytableView.delegate = self
134        mytableView.dataSource = self
135        //mytableView.separatorColor = UIColor.clear
136        makeKeybord()
137        self.weight.keyboardType = UIKeyboardType.decimalPad
138        self.bodyfat.keyboardType = UIKeyboardType.decimalPad
139        
140    }
141    //入力画面を閉じる時
142    func makeKeybord(){
143        // 仮のサイズでツールバー生成
144        let kbToolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: 320, height: 40))
145        kbToolBar.barStyle = UIBarStyle.default  // スタイルを設定
146        
147        kbToolBar.sizeToFit()  // 画面幅に合わせてサイズを変更
148        
149        // スペーサー
150        let spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
151        
152        // 閉じるボタン
153        let commitButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.done, target: self, action: #selector(ViewController.commitButtonTapped))
154        
155        kbToolBar.items = [spacer, commitButton]
156        weight.inputAccessoryView = kbToolBar
157        bodyfat.inputAccessoryView = kbToolBar
158    }
159    
160    @objc func commitButtonTapped (){
161        self.view.endEditing(true)
162    }
163}

実現したい事

二つ（円とドル）の値を折れ線グラフで表示したい。
左の縦軸は円で、右の縦軸はドルに合わせたい

###出来ていること

入力した内容を元にグラフで表す事が出来た。
値によって縦軸を変化させることまで出来た。

###困っていること
円とドルを別々の折れ線グラフに表す事ができなくて困っています。

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

回答1件

ベストアンサー

axisDependencyでどちらの軸を元にグラフを表示するかを決められるみたいです。
以下、値は固定で作ってみました。
問題点としては軸のポイントが自動で作られてしまうと左右で数が違ってしまったりするので
横軸線を引いておくとズレて見づらくなってしまいます。
一旦、左軸の線だけ残して右軸の分は消していますが、グラフの値によって
ポイント数が固定になるように計算して設定してあげればその問題は解決しそうな感じはします。

コメントへの回答追記：
「縦軸の値が大幅に異なった場合でも〜」と言う部分はaxisDependencyの設定で両方とも表示されるようになります。
問題点としては左右で表示するポイントが変わるためズレてくると言う部分かなと思っていましたが
参考画像でもズレているのでそこはそんなに問題でもないのかもしれません？
ただ、数字が打たれるポイントに関しては今のところ自動で打たれてしまっているので
参考画像のようにするには設定or改造が必要かもしれません。
下図は両グラフとも独立しているため、何もしないと最小値と最大値の位置によってグラフの一番下と
一番上が決まってしまうため、左右の軸のminとmaxを指定して参考画像に近づけてみたケースです。

回答になっていますでしょうか？

    func updateGraph(){
        var lineChartEntry  = [ChartDataEntry]()
        var lineChartEntry2  = [ChartDataEntry]()
        
        bfpnumbers = [25, 50, 85, 110 , 135, 150, 180, 210]
        numbers = [15700, 15900, 16200, 16500, 16700, 16900, 17100, 17700]
        
        for i in 0..<numbers.count {
            
            let value = ChartDataEntry(x: Double(i), y: numbers[i])
            //Y軸の右側の値について
            chtChart.leftAxis.enabled = true
            lineChartEntry.append(value)
            
        }
        
        for i in 0..<bfpnumbers.count {
            
            let value2 = ChartDataEntry(x: Double(i), y: bfpnumbers[i])
            //Y軸の右側の値について
            chtChart.rightAxis.enabled = true
            lineChartEntry2.append(value2)
            
        }
        
        //横軸を非表示
        chtChart.xAxis.enabled = false
        
        let line1 = LineChartDataSet(values: lineChartEntry, label: "HPアクセス数")
        line1.colors = [NSUIColor.blue]
        
        let line2 = LineChartDataSet(values: lineChartEntry2, label: "受注件数")
        line2.colors = [NSUIColor.red]
        
        // どちらの軸に依存するか
        line1.axisDependency = .left
        line2.axisDependency = .right

        // 左右の軸のminとmaxを決める
//        chtChart.leftAxis.axisMinimum = 14500
//        chtChart.leftAxis.axisMaximum = 18000
        
//        chtChart.rightAxis.axisMinimum = 0
//        chtChart.rightAxis.axisMaximum = 250
        
        let data = LineChartData()
        data.addDataSet(line1)
        data.addDataSet(line2)
        
        line1.drawValuesEnabled = false
        line2.drawValuesEnabled = false
        
        line1.drawCirclesEnabled = false
        line2.drawCirclesEnabled = false
        
        // ポイントの数を合わせないと複数線表示されてしまうのでいったんfalse
        chtChart.rightAxis.drawGridLinesEnabled = false
        
        chtChart.data = data
        chtChart.chartDescription?.text = "My awesome chart"
        
    }

投稿2018/08/02 06:41

編集2018/08/03 02:07