ios - 如何在 iOS Chart Graph Framework 中设置多种背景颜色

Question

我想在图表视图中设置多种背景颜色。可以在图表视图的背景中设置单一颜色，但无法设置多种颜色。

百分比要添加背景颜色 0% 到 20% - 红色，21% 到 60% - 白色和 61% 到 100% 的绿色

Answer 1

我认为您正在寻找 CAGradientLayer，它可能会对您有所帮助。

let gradient = CAGradientLayer()
gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
gradient.locations = [0.0, 1.0]

let view = UIView()
view.layer.insertSublayer(gradient, at: 0)

该视图是您要应用颜色的位置。

如果您想了解更多详细信息：https ://developer.apple.com/documentation/quartzcore/cagradientlayer

Answer 2

我的方法是使用填充折线图作为背景颜色。您需要添加两个额外的数据集，一个用于红色区域，另一个用于绿色区域。此外，您需要使用自定义FillFormatter填充从顶部到图表线的绿色区域。

在这个例子中，我定义addFillingArea了函数并使用它来添加两个额外的数据集。

override func viewDidLoad() {
    super.viewDidLoad()

    // ...

    let chartData = LineChartData()

    addFillingArea(to: chartData, withColor: .red, xFirstValue: 0, xLastValue: 11, yValue: 6)
    addFillingArea(to: chartData, withColor: .green, xFirstValue: 0, xLastValue: 11, yValue: 12, fillFormatter: TopToLineFillFormatter())

    // add your data to chartData here

    lineChartView.data = chartData

    // ...
}

func addFillingArea(to chartData: ChartData, withColor color: UIColor, xFirstValue: Double, xLastValue: Double, yValue: Double, fillFormatter: IFillFormatter? = nil) {
    let dataEntries = [
        ChartDataEntry(x: xFirstValue, y: yValue),
        ChartDataEntry(x: xLastValue, y: yValue)
    ]

    let chartDataSet = LineChartDataSet(values: dataEntries, label: nil)
    chartDataSet.setColor(.clear)
    chartDataSet.drawValuesEnabled = false
    chartDataSet.drawCirclesEnabled = false

    chartDataSet.drawFilledEnabled = true
    chartDataSet.fillAlpha = 0.5
    chartDataSet.fill = Fill(CGColor: color.cgColor)
    chartDataSet.fillFormatter = fillFormatter

    chartData.addDataSet(chartDataSet)
}

class TopToLineFillFormatter: NSObject, IFillFormatter {
    func getFillLinePosition(dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat {
        var fillMin: CGFloat = 0.0

        fillMin = CGFloat( dataProvider.chartYMax )

        return fillMin
    }
}

Answer 3

我用这种方式完成了。首先，我使 ChartView 的高度保持不变（例如 150）。并在数据后面设置绘制限制线。

// Set the height the chart view
chartViewHeight.constant = 150

//Call below function like this
self.setupCommonProperties(chartView: barChartView)

// Limit line function
   func setLimitLine(chartView: BarLineChartViewBase) {
    let leftAxis = chartView.leftAxis
    leftAxis.removeAllLimitLines()
    var index = 0
    while index < 20 {
        let ll1 = ChartLimitLine(limit: Double(80 + index), label: "")
        ll1.lineWidth = chartViewHeight.constant / 100
        ll1.drawLabelEnabled = false
        ll1.lineColor = NSUIColor(red: 193.0/255.0, green: 255.0/255.0, blue: 189.0/255.0, alpha: 1.0)
        leftAxis.addLimitLine(ll1)

        let ll2 = ChartLimitLine(limit: Double(0 + index), label: "")
        ll2.lineWidth = chartViewHeight.constant / 100
        ll2.drawLabelEnabled = false
        ll2.lineColor = NSUIColor(red: 194.0/255.0, green: 81.0/255.0, blue: 82.0/255.0, alpha: 1.0)
        ll2.lineDashLengths = [0,0]
        leftAxis.addLimitLine(ll2)

        index += 1
    }

    leftAxis.axisMaximum = 100
    leftAxis.axisMinimum = 0
    leftAxis.drawLimitLinesBehindDataEnabled = true
}