Question

我的问题是

我想创建一个包含特定值的简单折线图。这是在mainviewcontroller内的视图中完成的。我创建了一个名为图表的UIview。我从API中检索数据时将数据传递给图表。我想出了如何绘制轴但我现在卡住了。我无法在谷歌上找到关于如何在间隔上设置标签以及使点动态显示的任何内容。

绘制xasis及其标签。

在图表中绘制点。

我的赞美

我想出了如何做我要求的所有事情。

我现在的代码：

class ChartView: UIView {

//some variables
var times: [String] = []
var AmountOfRain: [Double] = []
let pathy = UIBezierPath()
let pathx = UIBezierPath()
var beginwitharray = Array<CGFloat>()

// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
    // Drawing code

    //draw the y line
    pathy.move(to: CGPoint(x: 30, y: 10))
    pathy.addLine(to: CGPoint(x: 30, y: 10))
    pathy.addLine(to: CGPoint(x: 30, y: frame.size.height - 30))
    UIColor.black.setStroke()
    pathy.lineWidth = 1.0
    pathy.stroke()

    //draw the x line
    pathx.move(to: CGPoint(x: 30, y: frame.size.height - 30))
    pathx.addLine(to: CGPoint(x: 30, y: frame.size.height - 30))
    pathx.addLine(to: CGPoint(x: frame.size.width - 30, y: frame.size.height - 30))
    UIColor.black.setStroke()
    pathx.lineWidth = 1.0
    pathx.stroke()

    //when the data arrives form the SUPER slow duienradar API refresh it with the data
    if beginwitharray != []{
        //remove the label retriving data
        let label = viewWithTag(1)
        DispatchQueue.main.sync {
            label?.removeFromSuperview()
        }
        //create the dots in the graph
        var point = CGPoint()
        //simple way to do 2 loop in 1 loop.
        var intforbeginarray = 0
        let stoke = UIBezierPath()
        //get the first 6 itmes out of the rain array cuz of space issues
        let first6aumountarray = AmountOfRain[0...5]
        stoke.move(to: CGPoint(x: 30, y: self.frame.size.height - 30))

        //loop trough the data in the amounts array
        for amount in first6aumountarray{
            //determen the hight of the dot
            let InitialHeight = (CGFloat(amount) * (self.frame.size.height - 30))/6
            let pointHeight = (frame.size.height - 30) - InitialHeight

                //make the point so we can draw it using UIbezierpath()
                point = CGPoint(x: beginwitharray[intforbeginarray] + 20, y: pointHeight)
                intforbeginarray += 1

                //create the dot
                let dot = UIBezierPath()
                dot.addArc(withCenter: point, radius: CGFloat(5), startAngle: CGFloat(0), endAngle: CGFloat(360), clockwise: true)
                UIColor.black.setFill()
                dot.lineWidth = 30
                dot.fill()

                //create the line between dots will give a warning on the last one cuz the last one doenst go anyway
                stoke.addLine(to: point)
                stoke.move(to: point)
                stoke.lineWidth = 1
                UIColor.black.setStroke()
        }
        //make the strokes
        stoke.stroke()
    }
}
func getvalues(RainData: [Double], TimesData:[String]){

    //assing the data to the subview
    self.AmountOfRain = RainData
    self.times = TimesData

    //xaxis values
    let maxint = [0, 1, 2, 3, 4, 5, 6]

    //calculate the hight spacing to fit the graph
    let heightperstep = ((self.frame.size.height - 5)/6)-5
    var beginheight = self.frame.size.height - 35

    //calculate the width spacing to fit the graph
    let widthperstep = ((self.frame.size.width - 5)/6)-5
    var beginwith = CGFloat(30)

    //extra check to see if we have data at all.
    if times != []{
        //get the first 6 items out of the times array for use in our graph
        let first6 = times[0...5]
        //draw the label on the main queue
        DispatchQueue.main.sync {
            //draw the xaxis labels accroding to the spacing
            for number in maxint{
                let label = UILabel(frame: CGRect(x: 5, y: beginheight, width: 25, height: 15))
                label.text = "\(number)"
                self.addSubview(label)
                beginheight = beginheight - heightperstep
            }
            //draw the yaxis labels according to the spacing
            for time in first6{
                let label = UILabel(frame: CGRect(x: beginwith, y: self.frame.size.height - 20, width: 55, height: 15))
                label.text = time
                self.addSubview(label)
                beginwitharray.append(beginwith)
                beginwith = beginwith + widthperstep
            }
        }
    }
    //redrawthe graph with new data.
    setNeedsDisplay()
}}

任何帮助将不胜感激。我也不能使用lib或pod，因为这是一个学校项目，我需要创建一个简单的图形。

编辑：

完成我的代码，运行此代码时清除错误

我首先做的是绘制x-asis和y轴。在此之后，我考虑了aumountofrain数据的合理值。事实证明这不可能真的高于6.因为我可以在空间中安装6个标签，所以我可以轻松地按下1直到我达到0的步骤。我所做的计算是针对我的特定帧高度。在我想出了全部和y-asxis的填充之后。这是一个弄清楚如何在正确的地方得到点的问题。由于我已经在beginwitharray中有数据，我只需要计算高度。然后它只是通过数据循环并绘制每个点。然后我只需要使用uibezierpath连接点。

我希望我的麻烦会在他们读完我的时候节省很多时间。

Answer 1

这可能会有所帮助：Draw Graph curves with UIBezierPath

基本上你需要做的就是你需要知道y轴值范围的每个数据集，并根据这些范围为每个值分配一个CGFloat值（在你的情况下，下雨的英寸需要与a相关）某些CGFloat值）。我们假设您设置了amountOfRain = [0.1, 1.3, 1.5, 0.9, 0.1, 0]，因此您的范围为var rangeY = amountOfRain.max() - amountOfRain.min()。现在让我们通过将降雨英寸转换为与您已经绘制的轴相对应的CGFloat值来找出您的第一个数据点0.1应该在图表上的位置，这个等式只是基本代数：let y1 = (amountOfRain[0]/rangeY)*((frame.size.height-30) - 10) + 10现在看起来你的雨水样本是定期的，所以也许let x1:CGFloat = 10现在你可以在CGPoint上添加一个点或什么对应的（x1，y1）。如果您对所有数据点执行此操作，则会创建一个图表，其最大值位于图表顶部，最小值位于底部。祝你好运！

使用uibezierpath创建一个非常简单的图形

1 个答案: