iOS图表：如何使用图表Cocoapod填充两条图表界线之间的区域？

使用Charts CoCoPapod，我可以将两条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

输出：

要求：

---

我认为，对于iOS图表，我们没有显示带填充的限制线的标准方法。但我们可以手动实现它们

我使用了两个主要观点

• 我们可以画一个填充的折线图
• 我们可以使用

  CombinedChartView

  组合条形图和折线图

因此，您需要将

条形图表视图

替换为

组合图表视图

，添加填充折线图，并使用自定义的

填充格式设置器

在图表线上方显示填充区域

请参见代码示例：

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 )
    }
}

结果是：

---

我想出了一个解决方案，用图表Cocoapod在图表线之间填充

• 减小虚线之间的间距，以便可以将其视为实线
• 指定线的宽度，并使用“for loop”均匀填充限制线之间的空间

---

有趣的解决方案。但在我的情况下，可以使用半透明填充区域

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