• 2025/3/11
• 4分

【Swift/DGCharts】グラフにツールチップを実装する方法！MarkerView

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：16.0
• iOS：18.0
• Swift：5.9
• DGCharts： 5.1.0
• macOS：Sonoma 14.6.1

MarkerViewでオリジナルのツールチップを作成する

DGChartsでグラフにツールチップを実装するにはMarkerViewプロトコルを継承したカスタムViewクラスを定義します。例えば「シンプルにX軸の値とY軸の値を表示するツールチップ」を実装したい場合はUILabelを追加して以下のように実装します。

import DGCharts

// CustomMarkerViewをカスタマイズするためのクラス
class CustomMarkerView: MarkerView {
    
    private var label: UILabel!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.offset = CGPoint(x: -self.frame.size.width / 2, y: -self.frame.size.height)
        
        // ラベルを追加
        label = UILabel()
        label.font = UIFont.systemFont(ofSize: 14)
        label.textColor = .white
        label.textAlignment = .center
        label.frame = CGRect(x: 0, y: 0, width: 80, height: 40)
        label.backgroundColor = UIColor.black.withAlphaComponent(0.6)
        label.layer.cornerRadius = 8
        label.layer.masksToBounds = true
        self.addSubview(label)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // タッチしたデータポイントの情報を設定
    override func refreshContent(entry: ChartDataEntry, highlight: Highlight) {
        label.text = "(\(entry.x), \(entry.y))"
    }
}

refreshContentが実際にタップされたポイントのデータをツールチップに反映させて表示するためのメソッドです。あとはmarkerプロパティにカスタムクラスをセットすればタップされたポイントにツールチップが表示されるようになります。

グラフ全体の実装は以下を参考にしてください。

class ViewController: UIViewController {

    // チャート
    private var chartView: LineChartView!
    // チャートデータ
    private var lineDataSet: LineChartDataSet!
    
    // 折れ線グラフで表示するデータ(Y軸)
    private let data: [Double] = [100.0, 65.0, 90.0, 30.0, 45.0]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        drawChart(y: data)
    }
    
    private func drawChart(y: [Double]) {
            
        // チャートビューのサイズと位置を定義
        self.chartView = LineChartView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 400))
        chartView.center = self.view.center
        
        // チャートに渡す用の配列を定義
        var dataEntries: [ChartDataEntry] = []
        
        // Y軸のデータリストからインデックスと値を取得し配列に格納
        for (index, value) in y.enumerated() {
            // X軸は配列のインデックス番号
            let dataEntry = ChartDataEntry(x: Double(index), y: value)
            dataEntries.append(dataEntry)
        }

        // 折れ線グラフ用のデータセット labelはグラフ名
        lineDataSet = LineChartDataSet(entries: dataEntries, label: "グラフ名")
        // グラフに反映
        chartView.data = LineChartData(dataSet: lineDataSet)
        
        // CustomMarkerViewを作成
        let customMarker = CustomMarkerView(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
        chartView.marker = customMarker
        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        // x軸のラベル数をデータの数にする
        chartView.xAxis.labelCount = dataEntries.count - 1
        // ダブルタップズーム不可
        chartView.doubleTapToZoomEnabled = false

        self.view.addSubview(self.chartView)
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。