web-dev-qa-db-ja.com

iOSチャートを使用してフローティンググラフマーカーを作成する方法

私はios-chartsフレームワークを使用しており、指を触れて左右に動かすとグラフ上に浮かぶマーカーを作成したいと考えています。参考までに折れ線グラフを使用しています。

しかし、マーカーをタッチしたときにチャート上のマーカーの位置を取得する方法がわかりません。

MarkerViewのサブクラス化について読みましたが、機能していません。 iOSチャートに触れたときに現れるポイントの位置を取得する方法を教えてください。

iosswiftios-charts
13
Rob Norback

それで私はついにこれを機能させ、コミュニティに追加したいと思いました。これが私のチャートがどのように見えるかです：

enter image description here

チャート上で指を動かすと、上のリーダーが移動し、チャートから値を読み取ります。

これを機能させるには、次のことを行う必要がありました。

  1. グラフを実装するファイルには、必ずChartViewDelegateを含めてください。

  2. 次に、chartValueSelectedメソッドを実装します。

  3. 次にgetMarkerPositionメソッドを使用すると、「マーカー」を好きな場所に配置できます。

サンプルコードは次のとおりです。

class MarkerView: UIView {
    @IBOutlet var valueLabel: UILabel!
    @IBOutlet var metricLabel: UILabel!
    @IBOutlet var dateLabel: UILabel!
}

let markerView = MarkerView()

func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) { 

    let graphPoint = chartView.getMarkerPosition(entry: entry,  highlight: highlight)

    // Adding top marker
    markerView.valueLabel.text = "\(entry.value)"
    markerView.dateLabel.text = "\(months[entry.xIndex])"
    markerView.center = CGPointMake(graphPoint.x, markerView.center.y)
    markerView.hidden = false

}

markerViewは、グラフビューも含むメインビューに手動で追加したxibです。 markerViewは、3つのラベルを含むUIViewです。写真にある3.0、インプレッション、4月です。

graphPointは、グラフ上にあるCGPointです。 graphPointのxとyを使用して、markerViewの位置を変更できます。ここでは、markerViewのy値を同じに保ち、x値を変更して、タッチで前後に移動できるようにしました。

26
Rob Norback

これは、iOS-Chartsリポジトリで提供されている例 BallonMarker に基づいています。

MarkerImageの他のサブクラスの例を見つけることができなかったので、これが誰かにとって役立つことを願っています。したがって、これまでCGContextを使用したことがなかったので、これは多くの痕跡とエラーでした。

enter image description here

使用するにはこのクラスを追加します

class PillMarker: MarkerImage {

    private (set) var color: UIColor
    private (set) var font: UIFont
    private (set) var textColor: UIColor
    private var labelText: String = ""
    private var attrs: [NSAttributedString.Key: AnyObject]!

    static let formatter: DateComponentsFormatter = {
        let f = DateComponentsFormatter()
        f.allowedUnits = [.minute, .second]
        f.unitsStyle = .short
        return f
    }()

    init(color: UIColor, font: UIFont, textColor: UIColor) {
        self.color = color
        self.font = font
        self.textColor = textColor

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center
        attrs = [.font: font, .paragraphStyle: paragraphStyle, .foregroundColor: textColor, .baselineOffset: NSNumber(value: -4)]
        super.init()
    }

    override func draw(context: CGContext, point: CGPoint) {
        // custom padding around text
        let labelWidth = labelText.size(withAttributes: attrs).width + 10
        // if you modify labelHeigh you will have to Tweak baselineOffset in attrs
        let labelHeight = labelText.size(withAttributes: attrs).height + 4

        // place pill above the marker, centered along x
        var rectangle = CGRect(x: point.x, y: point.y, width: labelWidth, height: labelHeight)
        rectangle.Origin.x -= rectangle.width / 2.0
        let spacing: CGFloat = 20
        rectangle.Origin.y -= rectangle.height + spacing

        // rounded rect
        let clipPath = UIBezierPath(roundedRect: rectangle, cornerRadius: 6.0).cgPath
        context.addPath(clipPath)
        context.setFillColor(UIColor.white.cgColor)
        context.setStrokeColor(UIColor.black.cgColor)
        context.closePath()
        context.drawPath(using: .fillStroke)

        // add the text
        labelText.draw(with: rectangle, options: .usesLineFragmentOrigin, attributes: attrs, context: nil)
    }

    override func refreshContent(entry: ChartDataEntry, highlight: Highlight) {
        labelText = customString(entry.y)
    }

    private func customString(_ value: Double) -> String {
        let formattedString = PillMarker.formatter.string(from: TimeInterval(value))!
        // using this to convert the left axis values formatting, ie 2 min
        return "\(formattedString)"
    }
}

次にチャートをアクティブにします

let marker = PillMarker(color: .white, font: UIFont.boldSystemFont(ofSize: 14), textColor: .black)
chartView.marker = marker
3
DogCoffee