Charts: 채워진 꺾은선형 차트

채우기 사각형을 그리는 drawLinearFill 살펴보십시오. generateFilledPath 및 getFillLinePosition 내의 채우기 사각형을 계산합니다. 이상적으로는 줄 사이에 rect를 가져오려면 해당 메서드를 재정의해야 합니다.

LineChartRenderer 를 서브클래싱하고 IFillFormatter 구현하는 클래스에 변수를 추가하여 @liuxuan30 의 제안에 따라 이를 달성했습니다. 두 번째 데이터 세트를 채우기 라인에 대한 표시기로 전달하고 그에 따라 경로를 그립니다(선형에만 해당하지만 베지어에 대해서도 동일한 작업을 수행할 수 있다고 가정합니다).

class AreaFillFormatter: IFillFormatter {

    var fillLineDataSet: LineChartDataSet?

    init(fillLineDataSet: LineChartDataSet) {
        self.fillLineDataSet = fillLineDataSet
    }

    public func getFillLinePosition(dataSet: ILineChartDataSet, dataProvider: LineChartDataProvider) -> CGFloat {
        return 0.0
    }

    public func getFillLineDataSet() -> LineChartDataSet {
        return fillLineDataSet ?? LineChartDataSet()
    }

}

class CustomLineChartRenderer: LineChartRenderer {

    override open func drawLinearFill(context: CGContext, dataSet: ILineChartDataSet, trans: Transformer, bounds: XBounds) {
        guard let dataProvider = dataProvider else { return }

        let areaFillFormatter = dataSet.fillFormatter as? AreaFillFormatter

        let filled = generateFilledPath(
            dataSet: dataSet,
            fillMin: dataSet.fillFormatter?.getFillLinePosition(dataSet: dataSet, dataProvider: dataProvider) ?? 0.0,
            fillLineDataSet: areaFillFormatter?.getFillLineDataSet(),
            bounds: bounds,
            matrix: trans.valueToPixelMatrix)

        if dataSet.fill != nil
        {
            drawFilledPath(context: context, path: filled, fill: dataSet.fill!, fillAlpha: dataSet.fillAlpha)
        }
        else
        {
            drawFilledPath(context: context, path: filled, fillColor: dataSet.fillColor, fillAlpha: dataSet.fillAlpha)
        }
    }

    fileprivate func generateFilledPath(dataSet: ILineChartDataSet, fillMin: CGFloat, fillLineDataSet: ILineChartDataSet?, bounds: XBounds, matrix: CGAffineTransform) -> CGPath
    {
        let phaseY = animator?.phaseY ?? 1.0
        let isDrawSteppedEnabled = dataSet.mode == .stepped
        let matrix = matrix

        var e: ChartDataEntry!
        var fillLineE: ChartDataEntry?

        let filled = CGMutablePath()

        e = dataSet.entryForIndex(bounds.min)
        fillLineE = fillLineDataSet?.entryForIndex(bounds.min)

        if e != nil
        {
            if let fillLineE = fillLineE
            {
                filled.move(to: CGPoint(x: CGFloat(e.x), y: CGFloat(fillLineE.y * phaseY)), transform: matrix)
            }
            else
            {
                filled.move(to: CGPoint(x: CGFloat(e.x), y: fillMin), transform: matrix)
            }

            filled.addLine(to: CGPoint(x: CGFloat(e.x), y: CGFloat(e.y * phaseY)), transform: matrix)
        }

        // Create the path for the data set entries
        for x in stride(from: (bounds.min + 1), through: bounds.range + bounds.min, by: 1)
        {
            guard let e = dataSet.entryForIndex(x) else { continue }

            if isDrawSteppedEnabled
            {
                guard let ePrev = dataSet.entryForIndex(x-1) else { continue }
                filled.addLine(to: CGPoint(x: CGFloat(e.x), y: CGFloat(ePrev.y * phaseY)), transform: matrix)
            }

            filled.addLine(to: CGPoint(x: CGFloat(e.x), y: CGFloat(e.y * phaseY)), transform: matrix)
        }

        // Draw a path to the start of the fill line
        e = dataSet.entryForIndex(bounds.range + bounds.min)
        fillLineE = fillLineDataSet?.entryForIndex(bounds.range + bounds.min)
        if e != nil
        {
            if let fillLineE = fillLineE
            {
                filled.addLine(to: CGPoint(x: CGFloat(e.x), y: CGFloat(fillLineE.y * phaseY)), transform: matrix)
            }
            else
            {
                filled.addLine(to: CGPoint(x: CGFloat(e.x), y: fillMin), transform: matrix)
            }
        }

        // Draw the path for the fill line (backwards)
        if let fillLineDataSet = fillLineDataSet {
            for x in stride(from: (bounds.min + 1), through: bounds.range + bounds.min, by: 1).reversed()
            {
                guard let e = fillLineDataSet.entryForIndex(x) else { continue }

                if isDrawSteppedEnabled
                {
                    guard let ePrev = fillLineDataSet.entryForIndex(x-1) else { continue }
                    filled.addLine(to: CGPoint(x: CGFloat(e.x), y: CGFloat(ePrev.y * phaseY)), transform: matrix)
                }

                filled.addLine(to: CGPoint(x: CGFloat(e.x), y: CGFloat(e.y * phaseY)), transform: matrix)
            }
        }

        filled.closeSubpath()

        return filled
    }
}

프로젝트를 마스터하기 위한 완벽한 예:)

이 솔루션을 어떻게 해결/사용합니까?

@rob-k 이에 대한 사용 예를 제공해 주시겠습니까?

물론 다음과 같이 코드를 사용합니다.

let maxDataSet = LineChartDataSet()
let minDataSet = LineChartDataSet()

// ... fill the data sets

// Set the data
self.lineChart.data = LineChartData(dataSets: [maxDataSet, minDataSet])

// Set the custom line chart renderer
self.lineChart.renderer = CustomLineChartRenderer(dataProvider: self.lineChart, animator: self.lineChart.chartAnimator, viewPortHandler: self.lineChart.viewPortHandler)

maxDataSet.drawFilledEnabled = true
maxDataSet.fillFormatter = AreaFillFormatter(fillLineDataSet: minDataSet)

나는 이것을 수동으로 설치하고 예제에 따라 각 단계를 수행했는데 여전히 @rob-k가 작동하지 않는 것처럼 보입니다.

@rob-k 호출되지 않는 CustomLineChartRenderer의 기능 중 하나를 중단점을 사용하여 디버그하려고 했습니다.

LineChartRenderer 설정을 포함하도록 내 의견을 업데이트했습니다.

여전히 운이 없는 사람 @rob-k

ucbDataSet 와 lcbDataSet 사이의 색상을 원하면 두 번째 데이터 세트를 첫 번째 데이터 세트의 포맷터에 전달해야 합니다. 데이터 세트를 자체 포맷터에 전달하고 있습니다. 다음을 시도하십시오.

ucbDataSet.fillFormatter = AreaFillFormatter(fillLineDataSet: lcbDataSet)

(또는 그 반대)

이미 내가 설명하려고 시도한 것은
호출되지 않는 CustomLineChartRenderer 클래스의 함수 중 하나를 중단점을 사용하여 디버그하려고 했습니다.

코드에서 베지어 모드를 사용하고 있음을 알 수 있습니다.

lineChartDataSet.mode = .horizontalBezier
ucbDataSet.mode = .horizontalBezier
lcbDataSet.mode = .horizontalBezier

내가 제공한 코드는 선형 모드에서만 작동합니다. 모드를 .linear 하거나 drawHorizontalBezier 재정의하고 그에 따라 코드를 조정해야 합니다.

@rob-k 방금 작동했습니다. 찾아주셔서 감사합니다.

CombinedChart를 사용하여 이것을 구현할 수 있습니까?

CombinedChart를 사용하여 이것을 구현할 수 있습니까?

해결책을 찾았습니까? CombinedChart는 LinearChartRender가 아닌 CombinedChartRender를 사용하므로 콜백은 drawLinearFill 아니라 기본 Render를 사용합니다.

drawLinearFill 메소드가 존재하지 않습니다. 라이브러리에서 검색할 때 많은 새로운 렌더링이 필요합니다.

CombinedChart를 사용하여 이것을 구현할 수 있습니까?

솔루션 결합 차트 : https://github.com/PhilJay/MPAndroidChart/issues/338