如何使用 ios-charts 庫在燭台圖中創建自定義限制線標簽？

Question

我正在使用“圖表”庫在我的 iOS 應用程序中繪制燭台圖表。

如何為下圖所示的限制線設置標簽？

例子

據我所知，我必須為 Y 軸創建一個自定義渲染器，並覆蓋繪制限制線和/或 Y 軸標簽的方法。 到目前為止，我設法實現了此屏幕截圖，但標簽未附加到限制線的右端並且具有靜態位置，這意味着如果我縮放或拖動圖表，它不會與軸上的其他標簽一起正確移動. 截至目前，Y 標簽由圖表自動生成。

我試圖遵循這個例子，但它對我不起作用： MPAndroidChart 中限制線的自定義視圖

你能告訴我我到底應該怎么做才能使限制線和它的標簽在示例圖像上看起來像？ 因為我是 iOS 編程的新手，所以有詳細的解釋 + 代碼會很好。

Answer 1

好的，在對 Y 軸渲染器進行一些修補后，我設法實現了這種外觀和行為。

因此，為了獲得這種外觀，您必須：

1. 通過調用setDrawLabelsEnabled()並將參數設置為false禁用默認限制線標簽
2. 對 YAxisRenderer.swift 進行更改。 關鍵是稍微重做internal func drawYLabels(...)為每條限制線繪制額外的標簽。 請參閱下面的代碼。

3. 將偏移添加到 X 軸和 Y 軸（兩者），如下所示：

   chart.leftAxis.xOffset = 10.0 chart.leftAxis.yOffset = 0.0

這是新的internal func drawYLabels(...)方法的代碼片段：

internal func drawYLabels(
        context: CGContext,
        fixedPosition: CGFloat,
        positions: [CGPoint],
        offset: CGFloat,
        textAlign: NSTextAlignment)
    {
        guard
            let yAxis = self.axis as? YAxis
            else { return }

        let labelFont = yAxis.labelFont
        let labelTextColor = yAxis.labelTextColor

        let from = yAxis.isDrawBottomYLabelEntryEnabled ? 0 : 1
        let to = yAxis.isDrawTopYLabelEntryEnabled ? yAxis.entryCount : (yAxis.entryCount - 1)

        for i in stride(from: from, to: to, by: 1)
        {
            let text = yAxis.getFormattedLabel(i)

            ChartUtils.drawText(
                context: context,
                text: "   " + text + "   ",     // Adding some spaces infront and after the label to make some additional space for the bigger "limit line" labels
                point: CGPoint(x: fixedPosition, y: positions[i].y + offset),
                align: textAlign,
                attributes: [NSAttributedString.Key.font: labelFont, NSAttributedString.Key.foregroundColor: labelTextColor])


        }

        // This is where we start to draw labels for limit lines
        let myTransformer = self.transformer

        for line in yAxis.limitLines {

            let point = myTransformer!.pixelForValues(x: 0.0, y: line.limit)

            let text = ("  " + line.label + "  ") as NSString       // Adding some spaces to the label in order to make some additional space for the label
            let size = text.size(withAttributes: [NSAttributedString.Key.font: labelFont, NSAttributedString.Key.foregroundColor: UIColor.darkGray, NSAttributedString.Key.backgroundColor: UIColor.green])
            var labelPoint: CGPoint?

            // Drawing the triangle in front of the custom label
            let trianglePath = UIBezierPath()
            if yAxis.axisDependency == .right {
                labelPoint = CGPoint(x: fixedPosition + (size.height * 0.3), y: point.y - (size.height / 2))

                if textAlign == .center
                {
                    labelPoint!.x -= size.width / 2.0
                }
                else if textAlign == .right
                {
                    labelPoint!.x -= size.width
                }



                trianglePath.move(to: CGPoint(x: labelPoint!.x - size.height * 0.375, y: labelPoint!.y + (size.height / 2)))
                trianglePath.addLine(to: CGPoint(x: labelPoint!.x, y: labelPoint!.y + (size.height * 0.78)))
                trianglePath.addLine(to: CGPoint(x: labelPoint!.x, y: labelPoint!.y + (size.height * 0.22)))

            } else {

                labelPoint = CGPoint(x: 0.0, y: point.y - (size.height / 2))

                trianglePath.move(to: CGPoint(x: labelPoint!.x + size.width * 1.175, y: labelPoint!.y + (size.height / 2)))
                trianglePath.addLine(to: CGPoint(x: labelPoint!.x + size.width, y: labelPoint!.y + (size.height * 0.78)))
                trianglePath.addLine(to: CGPoint(x: labelPoint!.x + size.width, y: labelPoint!.y + (size.height * 0.22)))
            }

            NSUIGraphicsPushContext(context)

            // Drawing the custom label itself
            (text as NSString).draw(at: labelPoint!, withAttributes: [NSAttributedString.Key.font: labelFont, NSAttributedString.Key.foregroundColor: UIColor.darkGray, NSAttributedString.Key.backgroundColor: UIColor.green])

            trianglePath.close()

            // Drawing the triangle with the same color as the limit line and it's label
            line.lineColor.setFill()
            trianglePath.fill()

            NSUIGraphicsPopContext()

        }

    }

最終結果如下：截圖

這個實現不是最干凈的，但至少它對我有用。 如果我的話中有什么不清楚的地方，請隨時提問。