iOS Charts，数据标签自定义

Question

我在我的 iOS 应用程序中使用 danielgindi 图表库。在该图表上，我使用 lineChartDataSet.drawValuesEnabled = true 显示图表数据。我想垂直而不是水平显示值(数据点)。谁能告诉我如何更改该数据显示？

Answer 1

通过继承 LineChartRenderer 创建自定义渲染器。在此渲染器中，您需要覆盖一个函数 - drawValues(context: CGContext)。事实上，您可以从基类中复制粘贴此函数的大部分源代码，您只需要在带有文本旋转参数的变体上更改 ChartUtils.drawText 函数。幸运的是，ChartUtils 类有这样的功能。此外，添加新的初始化程序并重新定义 shouldDrawValues 函数，因为它无法通过基类中的 internal 访问级别访问。

import Foundation
import Charts

open class LineChartRendererWithVerticalValues: LineChartRenderer
{

    var _xBounds = XBounds() // Reusable XBounds object

    init(view: LineChartView) {
        super.init(dataProvider: view, animator: view.chartAnimator, viewPortHandler: view.viewPortHandler)
    }

    // Redefine `shouldDrawValues` function because of `internal` access level in the base class
    func shouldDrawValues(forDataSet set: IChartDataSet) -> Bool
    {
        return set.isVisible && (set.isDrawValuesEnabled || set.isDrawIconsEnabled)
    }

    // Keep all source code from the base class, except using another version of `ChartUtils.drawText` function
    open override func drawValues(context: CGContext)
    {
        guard
            let dataProvider = dataProvider,
            let lineData = dataProvider.lineData
            else { return }

        if isDrawingValuesAllowed(dataProvider: dataProvider)
        {
            var dataSets = lineData.dataSets

            let phaseY = animator.phaseY

            var pt = CGPoint()

            for i in 0 ..< dataSets.count
            {
                guard let dataSet = dataSets[i] as? ILineChartDataSet else { continue }

                if !shouldDrawValues(forDataSet: dataSet)
                {
                    continue
                }

                let valueFont = dataSet.valueFont

                guard let formatter = dataSet.valueFormatter else { continue }

                let trans = dataProvider.getTransformer(forAxis: dataSet.axisDependency)
                let valueToPixelMatrix = trans.valueToPixelMatrix

                let iconsOffset = dataSet.iconsOffset

                var valOffset = Int(dataSet.circleRadius * 1.75)

                if !dataSet.isDrawCirclesEnabled
                {
                    valOffset = valOffset / 2
                }

                _xBounds.set(chart: dataProvider, dataSet: dataSet, animator: animator)

                for j in stride(from: _xBounds.min, through: min(_xBounds.min + _xBounds.range, _xBounds.max), by: 1)
                {
                    guard let e = dataSet.entryForIndex(j) else { break }

                    pt.x = CGFloat(e.x)
                    pt.y = CGFloat(e.y * phaseY)
                    pt = pt.applying(valueToPixelMatrix)

                    if (!viewPortHandler.isInBoundsRight(pt.x))
                    {
                        break
                    }

                    if (!viewPortHandler.isInBoundsLeft(pt.x) || !viewPortHandler.isInBoundsY(pt.y))
                    {
                        continue
                    }

                    if dataSet.isDrawValuesEnabled {

                        // Changes are here!
                        // Draw text with rotation
                        ChartUtils.drawText(
                            context: context,
                            text: formatter.stringForValue(
                                e.y,
                                entry: e,
                                dataSetIndex: i,
                                viewPortHandler: viewPortHandler),
                            point: CGPoint(
                                x: pt.x,
                                y: pt.y - CGFloat(valOffset) - valueFont.lineHeight),
                            attributes: [NSAttributedStringKey.font: valueFont, NSAttributedStringKey.foregroundColor: dataSet.valueTextColorAt(j)],
                            anchor: CGPoint(x: 0.5, y: 0.5),
                            angleRadians:CGFloat.pi*3.0/2.0)
                    }

                    if let icon = e.icon, dataSet.isDrawIconsEnabled
                    {
                        ChartUtils.drawImage(context: context,
                                             image: icon,
                                             x: pt.x + iconsOffset.x,
                                             y: pt.y + iconsOffset.y,
                                             size: icon.size)
                    }
                }
            }
        }
    }
}

为您的 LineChartView 使用自定义渲染器，如果垂直值不适合 View ，则添加额外的偏移量。

myLineChartView.renderer = LineChartRendererWithVerticalValues(view: lineChartView)
myLineChartView.extraTopOffset = 20