在x轴以下刻度(iOS图表)

chr*_*ris 5 ios swift ios-charts

我想在x轴下方打勾,日期标签(3.6。,7.6。,12.6。17.6,21.6。,26.6。)所在的位置(请参见下图)。我正在使用iOS图表库(https://github.com/danielgindi/Charts)。

我设法通过覆盖drawGridLine方法在图表内做出刻度。我所做的就是将线段的开头从viewPortHandler.contentTop更改为viewPortHandler.contentBottom - 5。即,网格线从x轴上方开始5个像素。但是,当将网格线延伸到x轴(viewPortHandler.contentBottom + 10)之外时,该线仍只会向下绘制到x轴,而不能向下绘制。有人可以指出我正确的方向吗?如何在x轴下方绘制垂直线?

这是我的自定义XAxisRenderer:

class XAxisRendererWithTicks: XAxisRenderer {

    override func drawGridLine(context: CGContext, x: CGFloat, y: CGFloat) {
        guard
            let viewPortHandler = self.viewPortHandler
            else { return }

        if x >= viewPortHandler.offsetLeft
            && x <= viewPortHandler.chartWidth
        {
            context.beginPath()
            context.move(to: CGPoint(x: x, y: viewPortHandler.contentBottom - 5))
            context.addLine(to: CGPoint(x: x, y: viewPortHandler.contentBottom + 10))
            context.strokePath()
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

蜱虫出现,但我希望他们能够低于 x轴:

在此处输入图片说明

这里有一个类似的问题,但是它的答案并没有真正帮助我:X轴iOS图表上的垂直线

Phi*_*tto 6

我认为drawGridLine这不是正确的功能,因为您无法在 x 轴下方绘制。

我设法通过覆盖drawLabel. 此函数在 x 轴下方绘制标签,因此可以在那里绘制其他内容。例如我们想要的滴答声!

class XAxisRendererWithTicks: XAxisRenderer {

     override func drawLabel(context: CGContext, formattedLabel: String, x: CGFloat, y: CGFloat, attributes: [NSAttributedString.Key: Any], constrainedToSize: CGSize, anchor: CGPoint, angleRadians: CGFloat) {

         super.drawLabel(context: context, formattedLabel: formattedLabel, x: x, y: y, attributes: attributes, constrainedToSize: constrainedToSize, anchor: anchor, angleRadians: angleRadians)

         context.beginPath()

        context.move(to: CGPoint(x: x, y: y))
        context.addLine(to: CGPoint(x: x, y: self.viewPortHandler.contentBottom))

        context.strokePath()
     }
}
Run Code Online (Sandbox Code Playgroud)

要使用自定义渲染器:

let customXAxisRenderer = XAxisRendererWithTicks(viewPortHandler: self.chartView.viewPortHandler, xAxis: xAxis, transformer: self.chartView.getTransformer(forAxis: .left))

self.chartView.xAxisRenderer = customXAxisRenderer
Run Code Online (Sandbox Code Playgroud)

示例图片:请不要介意颜色,但我想您明白我的意思。;)

在此处输入图片说明

希望这可以帮助!