【Swift】iOS-Chartsでサークル（丸ポチ）の座標を取得する方法

やりたいこと

line chartを作るため、swift Chartsを使っています。
添付画像のようなchartの赤丸部分の座標を取得することで、
その部分にアニメーションするviewを被せたいと考えています。

前提

swift5
Xcode：11.1

↓ライブラリCharts
https://github.com/danielgindi/Charts

考えていること

chartValueSelectedでタップイベントが発生した際に、
highLightされた値のxとyが取得できることがわかっています。
なので、プログラムでchartValueSelectedを赤丸部分をタップしたことにして発動させれば、
座標を取得できるのではないかと考えています。
ここまで考えてつまってしまいました、、、

それ以外にライブラリ対応機能などがあれば、
教えていただければ助かります。

よろしくお願いいたします。

プログラムで配列の最後を選択したつもりのもの

以下がプログラムで配列の最後をタップしたことにして、
「chartValueSelected」を発動させようとしたものです。（発動してない）
そもそもhighLightは値タップという訳ではないのでしょうか、、、？

Swfit
1     //最初に表示させるデータをセットする
2    func setData(datas: [(value:Double, time:Double)]) {
3        var dataEntries:[ChartDataEntry] = []
4        //一回forで回す
5        for i in 0..<30 {
6            let entry = ChartDataEntry()
7            entry.x = datas[i].time
8            //            entry.x = Double(i)
9            entry.y = datas[i].value
10            
11            dataEntries.append(entry)
12        }
13        //ソートしないとエラーが起きる
14        dataEntries.sort(by: { $0.x < $1.x })
15        //特定の値だけサークルの色を変えるための変数
16        //        var circleColors = [NSUIColor]()
17        //ソートした後にもう一回forで回す（これは最初に表示させる分）
18        for i in 0..<20 {
19            let entry = ChartDataEntry()
20            entry.x = dataEntries[i].x
21            entry.y = dataEntries[i].y
22            
23            dataEntries.append(entry)
24        }
25        let set1 = LineChartDataSet(entries: dataEntries)
26        
27        //左を軸にchartを開始
28        set1.axisDependency = .left
29        //線の色
30        set1.setColor(UIColor(red: 51/255, green: 181/255, blue: 229/255, alpha: 1))
31        //描画される線の見え方
32        set1.mode = .linear
33        //線の太さ
34        set1.lineWidth = 1.0
35        //線の各値の丸ポチを消す
36        set1.drawCirclesEnabled = false
37        //線の上の各値の丸ポチの真ん中丸を消す
38        set1.drawCircleHoleEnabled = false
39        //19番目だけ丸ポチ表示
40        //        set1.circleColors = circleColors
41        //線の上に乗った各値を消す
42        set1.drawValuesEnabled = false
43        let data = LineChartData(dataSet: set1)
44        lineChartView.data = data
45        
46        lineChartView.highlightValue(Highlight(x: dataEntries[19].x, y: dataEntries[19].y, dataSetIndex: 0))
47        
48    }

↓上記コードの結果

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

回答1件

ベストアンサー

たぶんこういうことかと思いますが...

animation GIF がサイズ制限のため小さくて見えにくいのですが、タップしたポイントに赤丸を表示するようにしています。

また、別のポイントをタップすると、以前のポイントは自動で消えるようにしています。

データを自前で準備するのは大変なので、github からダウンロードしたデモに手を加えていますが、基本的には個別のプロジェクトでおも同じかと思います。

Swift
1var circleLayer: CAShapeLayer?
2    
3    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
4        // グラフ内でのタップされた座標
5        print(highlight.xPx, highlight.yPx)
6        
7        // 以前のアニメーションを消す
8        circleLayer?.removeFromSuperlayer()
9        
10        // 透明度のアニメーションを設定する。
11        // alpha ではなく、opacity であることに注意。
12        let animation = CAKeyframeAnimation(keyPath: "opacity")
13        animation.duration = 1
14        animation.keyTimes = [0.0, 0.5, 1.0]
15        animation.values = [1.0, 0.00, 1.0]
16        animation.repeatCount = .greatestFiniteMagnitude
17        
18        // タップされた座標を中心として円形を作る
19        circleLayer = CAShapeLayer()
20        let circlePath = UIBezierPath(arcCenter: CGPoint(x: highlight.xPx, y: highlight.yPx), radius: 20, startAngle: 0, endAngle: .pi*2, clockwise: true)
21        circleLayer?.path = circlePath.cgPath
22        circleLayer?.strokeColor = UIColor.red.cgColor
23        circleLayer?.fillColor = UIColor.clear.cgColor
24        circleLayer?.lineWidth = 2.0
25        circleLayer?.add(animation, forKey: nil)
26        chartView.layer.addSublayer(circleLayer!)
27    }

本当は、アニメーションに対して適切な keyPath を設定し、次回以降はそれを使って削除できれば見通しが良いのですが、なぜかうまくいかなかったので、 ViewController のプロパティとして CAShapeLayer のプロパティを持たせ、2回目以降はそれを使ってアニメーションを消すようにしています。

この実装はまだ中途半端で、たとえばスケールファクターを変更した場合には、赤丸が残ったまま追従しないなどの問題もありますが、それは追々解決していただければと思います。

##描画完了した瞬間に、指定したデータに円弧を書かせる方法

https://github.com/danielgindi/Charts/blob/master/ChartsDemo-iOS/Swift/DemoBaseViewController.swift

github 上のサンプルに対して加えた変更なのでちょっと複雑な流れになっています。

このサンプルの場合、delegate が親クラスとなっているため、途中でダウンキャストを行なっていますが、そうでない場合にはもっとシンプルに記述できると思われます。

解決のヒントになったissue:

(v3.0 + Swift3.0)ChartView highlightValueWithX not working #1495

Swift
1    // 表示が完全に止まったら呼び出される delegate
2    // https://github.com/danielgindi/Charts/issues/1495
3    func chartView(_ chartView: ChartViewBase, animatorDidStop animator: Animator) {
4        // chartView に保存されているデータセットのうち、1つ目を取り出す
5        if let set1 = chartView.data?.getDataSetByIndex(0) {
6            // 取り出したデータセットのうち、19番目を取り出す
7            if let val = set1.entryForIndex(19) {
8                // ハイライトさせる
9                chartView.highlightValue(Highlight(x: val.x, y: val.y, dataSetIndex: 0), callDelegate: true)
10                
11                
12                // delegate が親クラスになっているため、view を一度子クラスの LineChartView にダウンキャストする
13                if let view = chartView as? LineChartView {
14                    // 生データと画面上のデータを変換させる
15                    let transformer = view.getTransformer(forAxis: view.leftAxis.axisDependency)
16                    // ここで得られた値が生データ
17                    let pt = transformer.pixelForValues(x: val.x, y: val.y)
18                    
19                    // 以前のアニメーションを消す
20                    circleLayer?.removeFromSuperlayer()
21                    
22                    // 透明度のアニメーションを設定する。
23                    // alpha ではなく、opacity であることに注意。
24                    let animation = CAKeyframeAnimation(keyPath: "opacity")
25                    animation.duration = 1
26                    animation.keyTimes = [0.0, 0.5, 1.0]
27                    animation.values = [1.0, 0.00, 1.0]
28                    animation.repeatCount = .greatestFiniteMagnitude
29                    
30                    // タップされた座標を中心として円形を作る
31                    circleLayer = CAShapeLayer()
32                    let circlePath = UIBezierPath(arcCenter: CGPoint(x: pt.x, y: pt.y), radius: 20, startAngle: 0, endAngle: .pi*2, clockwise: true)
33                    circleLayer?.path = circlePath.cgPath
34                    circleLayer?.strokeColor = UIColor.red.cgColor
35                    circleLayer?.fillColor = UIColor.clear.cgColor
36                    circleLayer?.lineWidth = 2.0
37                    circleLayer?.add(animation, forKey: nil)
38                    chartView.layer.addSublayer(circleLayer!)
39                }
40            }
41        }
42    }
43

投稿2020/09/16 22:10

編集2020/09/17 09:00

TsukubaDepot

総合スコア5086

shimishin

2020/09/17 02:45

ありがとうございます！やりたいことはまさにこれです！本当に助かりました。もう一点甘えさせていただいてもよろしいでしょうか？このアニメーション丸ぽちをviewDidLoadでchartが表示された段階で、初期の状態で、配列の最後の値に対して発動させておきたいと思っています。 ※ユーザーのタップなしで発動させたいという意図があります。「chartValueSelected」はタップ時に発動するイベントだと思っているので、プログラムで配列の最後の値がタップされたことにすればいいのかと考えているのですが、その方法でつまってしまいました、、、お手数をおかけしますが、アイディアを頂ければ幸いです。よろしくお願いいたします。

shimishin

2020/09/17 03:00

追記でコードを追加させて頂きました。取得してきたデータを「dataEntries」にsetする過程で、指定した「entry.x」と「entry.y」にhighLightさせようとしています。

shimishin

2020/09/17 03:26

なんども申し訳ありません。微妙に変更を加えました。編集で追加したコードを実行したところ、追加画像の結果となりました。未タップ時にhighLightされた感はでていますが（縦と横の細い線がでている）「chartValueSelected」の中身は実行されていません。

TsukubaDepot

2020/09/17 04:02

可能あれば、単体で実行できそうな範囲でコードをいただくことは可能でしょうか。私自身、さっきサンプルに手を加えた程度しか知らないため、できれば上記のコードが動く程度のシンプルなコードをいただければご協力できるかとおもいます。どうぞよろしくお願いいたします。

shimishin

2020/09/17 04:27 編集

TsukubaDepot様の添付されているアニメーションを拝見したところ、「Charts」のgitに上がっている「Charts master」を使っているようにお見受けできたので、その中で動くコードを送らせて頂きます。「LineChartTimeViewController」の中の「setDataCount」の中で、 chartView.highlightValue(Highlight(x: values[19].x, y: values[19].y, dataSetIndex: 0)) を最後に記述頂ければと思います。プラスでTsukubaDepot様にご教授頂いた「chartValueSelected」の中身も加えております。それをすると、「Charts master」の「LineChartTimeViewController」で使われている「values（dataEntries）」の20番目にhighLightがあたり、添付画像のようになります。これをすることで、20番目にhighLightがあたり、「chartValueSelected」が発動し、最初にchartViewが表示された段階で、赤丸ポチのピコンピコンしているエフェクトつきのものが描画されていると考えていました。こちらでうまく伝わりますでしょうか、、、？何卒よろしくお願いいたします。

TsukubaDepot

2020/09/17 08:17

頑張ってソースコードから追ってみましたが、元々のソースコードに手を入れないと難しいかもしれません。というのは、あるポイントをタップしたときの、グラフ内（グラフに相当する View）の座標は得ることができるのですが、タップされていない状況では、その座標は得ることができないようです。一度登録した座標列から、対応する描画座標を得る方法がないか、オリジナルのソースコードも含めて追ってみたのですが、それも難しい感じです。たとえば、HightlightValue を呼び出した時に表示されるバルーンと合わせてアニメーションを表示させることは可能かもしれませんが、それを入れるとなると、今度はライブラリとの互換性に問題が生じる可能性もあり、簡単にはお勧めできません（実装もよく考えて行わないと、ライブラリ全体との整合性が取れなくなる可能性があります）。一番現実的なのは、Chart の作者に対して、同様の機能のリクエスト出すことかもしれません。一応、やってみたことは追記しておきますので、今後の参考にしてもらえればと思います。

TsukubaDepot

2020/09/17 09:00

もう少し深追いしたら、できてしまいました。詳しくは回答本文をご参照ください。

shimishin

2020/09/17 09:59

ありがとうございます！！こちらでも確かに動きました！！！本当に助かりました。重ね重ね、ありがとうございます！！！

TsukubaDepot

2020/09/17 10:47

私もいい勉強になりました。

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