iOS -Карты: Как заполнить область между двумя ChartLimitLines с помощью диаграмм Cocoapod?

Question

С помощью диаграмм Cocoapod я могу установить две ChartLimitLines в виде пунктирных линий. Но необходимо заполнить область между двумя ChartLimitLines на графике.

Вот мой код:

let lowLimitLine = ChartLimitLine(limit: 3, label: "")
lowLimitLine.lineWidth = 2.0
lowLimitLine.lineDashLengths = [5, 5]
lowLimitLine.lineColor = chartBGColor

let highLimitLine = ChartLimitLine(limit: 5, label: "")
highLimitLine.lineWidth = 2.0
highLimitLine.lineDashLengths = [5, 5]
highLimitLine.lineColor = chartBGColor

graphView.leftAxis.addLimitLine(lowLimitLine)
graphView.leftAxis.addLimitLine(highLimitLine)
graphView.leftAxis.drawLimitLinesBehindDataEnabled = true
graphView.fitBars = true

Вывод:

Требование:

Answer 1

Я думаю, что с iOS -Charts у нас нет стандартных методов отображения предельных линий с заливкой. Но мы можем реализовать их вручную.

Я использовал две основные идеи.

• Мы можем нарисовать заполненную линейную диаграмму.
• Мы можем объединить гистограммы и линейные диаграммы, используя CombinedChartView.

Поэтому вам необходимо заменить BarChartView на CombinedChartView, добавить заполненную линейную диаграмму и использовать пользовательский fillFormatter для отображения заполненной области над линией диаграммы.

См. Код пример:

class ViewController: UIViewController {

    // Use CombinedChartView instead BarChartView
    @IBOutlet weak var chartView: CombinedChartView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set draw order - draw filled area behind bars
        chartView.drawOrder = [
            DrawOrder.line.rawValue,
            DrawOrder.bar.rawValue
        ]

        let data = CombinedChartData()

        // Just your data
        let dataEntries: [ChartDataEntry] = [
            BarChartDataEntry (x: 10, y: 20),
            BarChartDataEntry (x: 15, y: 40)
        ]
        let barDataSet = BarChartDataSet(entries: dataEntries)
        barDataSet.setColor(UIColor.blue)
        data.barData = BarChartData(dataSet: barDataSet)

        // Data for filled area
        let filledAreaDataSet = createFillingAreaDataSet(xMinValue: 8, xMaxValue: 17, yValue: 32)
        data.lineData = LineChartData(dataSet: filledAreaDataSet)

        chartView.data = data
    }

    // Create data set for filled area
    private func createFillingAreaDataSet(xMinValue: Double, xMaxValue: Double, yValue: Double) -> LineChartDataSet {
        let dataEntries: [ChartDataEntry] = [
            ChartDataEntry(x: xMinValue, y: yValue),
            ChartDataEntry(x: xMaxValue, y: yValue)
        ]
        let chartDataSet = LineChartDataSet(entries: dataEntries, label: nil)

        // hide chart line and values
        chartDataSet.lineWidth = 0
        chartDataSet.drawValuesEnabled = false
        chartDataSet.drawCirclesEnabled = false

        // customize filled area
        chartDataSet.drawFilledEnabled = true
        chartDataSet.fillAlpha = 1
        chartDataSet.fill = Fill(CGColor: UIColor.green.cgColor)

        // use custom fillFormatter for draw filled area from the top of the chart to yValue
        chartDataSet.fillFormatter = CustomFillFormatter()

        return chartDataSet
    }
}

// Define custom fill formatter for drawing filled area from the top of the chart to yValue
class CustomFillFormatter: NSObject, IFillFormatter {
    func getFillLinePosition(dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat {
        return CGFloat( dataProvider.chartYMax )
    }
}

И результат:

Answer 2

Я нашел решение с помощью Cocoapod Charts для заполнения между ChartLimitLines.

• Уменьшите расстояние между строками da sh, чтобы его можно было рассматривать как solid линию.
• Укажите ширину линии и используйте l oop, чтобы равномерно заполнить пространство между линиями ограничения.

for limit in stride(from: 3.0, to: 5.0, by: 0.1) {
   let limitLine = ChartLimitLine(limit: limit, label: "")
   limitLine.lineWidth = 10.0
   limitLine.lineDashLengths = [0.1, 0.1]
   limitLine.lineColor = chartBGColor
   graphView.leftAxis.addLimitLine(limitLine)
 }

 graphView.leftAxis.drawLimitLinesBehindDataEnabled = true
 graphView.fitBars = true