預(yù)覽
折線圖
變量初始化
var array: NSArray
let borderX: CGFloat
let borderY: CGFloat
let x: Int
let y: Int
let yValue: CGFloat
let xValue: CGFloat
let yStart: CGFloat
let xStart: CGFloat
let widthX: CGFloat
let heightY: CGFloat
構(gòu)造函數(shù)
init(frame:CGRect,array:NSArray) {
//內(nèi)邊距
borderX = 40
borderY = 20
//x和y的個(gè)數(shù)
//x = 4: 2014,2015,2016,2017
//y = 6: 0,500,100,1500,2000,2500
x = 4
y = 6
//x和y每個(gè)單位代表的值
yValue = 500
xValue = 1
//x和y的起始值
yStart = 0
xStart = 2014
//x和y的單位長(zhǎng)度
widthX = (frame.size.width - borderX * 2) / CGFloat(x)
heightY = (frame.size.height - borderY * 2) / CGFloat(y)
self.array = array
super.init(frame: frame)
self.frame = frame
self.backgroundColor = UIColor.clear
//畫x軸的label:2014,2015...
drawX()
//畫y軸的label:0,500,1000...
drawY()
//畫折線
drawline()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
畫坐標(biāo)軸,虛線,和數(shù)據(jù)點(diǎn)
override func draw(_ rect: CGRect) {
//畫坐標(biāo)軸
let context = UIGraphicsGetCurrentContext()
context?.setStrokeColor(UIColor.blue.cgColor)
context?.setLineWidth(1)
context?.move(to: CGPoint(x: borderX, y: borderY))
context?.addLine(to: CGPoint(x: borderX, y: rect.size.height - borderY))
context?.addLine(to: CGPoint(x: rect.size.width - borderX, y: rect.size.height - borderY))
context?.strokePath()
//畫y軸的分割虛線
let context2 = UIGraphicsGetCurrentContext()
context2?.setStrokeColor(UIColor.lightGray.cgColor)
context2?.setLineWidth(1)
for i in 1..<y {
let yLabel = self.viewWithTag(2000+i) as! UILabel
context2?.move(to: CGPoint(x: borderX-3, y: yLabel.frame.origin.y+heightY/2))
context2?.addLine(to: CGPoint(x: rect.size.width-borderX, y: yLabel.frame.origin.y+heightY/2))
}
context2?.strokePath()
//畫x軸的分割點(diǎn)
let context3 = UIGraphicsGetCurrentContext()
context3?.setStrokeColor(UIColor.lightGray.cgColor)
context3?.setLineWidth(1)
for i in 0..<x {
let xLabel = self.viewWithTag(1000+i) as! UILabel
context3?.move(to: CGPoint(x: xLabel.frame.origin.x+widthX, y: rect.size.height-borderY))
context3?.addLine(to: CGPoint(x: xLabel.frame.origin.x+widthX, y: rect.size.height-borderY+5))
}
context3?.strokePath()
//畫傳入數(shù)組值對(duì)應(yīng)的點(diǎn)
let context4 = UIGraphicsGetCurrentContext()
context4?.setStrokeColor(UIColor.black.cgColor)
context4?.setLineWidth(2)
//y軸的總值
let yTotalValue = yStart + yValue * CGFloat(y)
//y軸的長(zhǎng)度
let height = self.frame.size.height - borderY * CGFloat(2)
for i in 0..<x {
//計(jì)算點(diǎn)的縱坐標(biāo)
let pointy = self.frame.size.height - (self.array[i] as! CGFloat)/yTotalValue*height - borderY
context4?.move(to: CGPoint(x: widthX/2+widthX*CGFloat(i)+borderX, y: pointy))
context4?.addArc(center: CGPoint(x: widthX/2+widthX*CGFloat(i)+borderX, y: pointy), radius: 2, startAngle: 0, endAngle: CGFloat(2.0 * Double.pi), clockwise: false)
}
context4?.drawPath(using: .fillStroke)
context4?.strokePath()
}
寫X軸Y軸的數(shù)字
func drawX() {
for i in 0..<x {
let xLabel = UILabel(frame: CGRect(x: borderX+widthX*CGFloat(i), y: self.frame.size.height-borderY+5, width: widthX, height: 10))
let x = Int(xStart + xValue * CGFloat(i))
xLabel.text = String.init(format: "%i", x)
xLabel.font = UIFont.systemFont(ofSize: 10)
xLabel.textAlignment = .center
xLabel.tag = 1000 + i
self.addSubview(xLabel)
}
}
func drawY() {
for i in 0..<y {
let yLabel = UILabel(frame: CGRect(x: 0, y: self.frame.size.height-borderY-heightY/2-heightY*CGFloat(i), width: 35, height: heightY))
let y = Int(yStart + yValue * CGFloat(i))
yLabel.text = String.init(format: "%i", y)
yLabel.font = UIFont.systemFont(ofSize: 10)
yLabel.textAlignment = .right
yLabel.tag = 2000 + i
self.addSubview(yLabel)
}
}
畫折線
func drawline() {
let yTotalValue = yStart + yValue * CGFloat(y)
let height = self.frame.size.height - borderY * CGFloat(2)
let pointy = self.frame.size.height - (self.array[0] as! CGFloat)/yTotalValue*height - borderY
//在第一個(gè)點(diǎn)下方寫數(shù)值
let textLabel = UILabel(frame: CGRect(x: widthX/2+borderX, y: pointy, width: 50, height: 20))
textLabel.text = String.init(format: "%i", (self.array[0] as! Int))
textLabel.font = UIFont.systemFont(ofSize: 10)
self.addSubview(textLabel)
//貝塞爾曲線設(shè)置起始點(diǎn)
let linePath = UIBezierPath()
linePath.move(to: CGPoint(x: widthX/2+borderX, y: pointy))
//開始畫折線和后續(xù)的數(shù)值
for i in 0..<x {
let pointy = self.frame.size.height - (self.array[i] as! CGFloat)/yTotalValue*height - borderY
linePath.addLine(to: CGPoint(x: widthX/2+widthX*CGFloat(i)+borderX, y: pointy))
let textLabel = UILabel(frame: CGRect(x: widthX/2+widthX*CGFloat(i)+borderX, y: pointy, width: 50, height: 20))
textLabel.text = String.init(format: "%i", (self.array[i] as! Int))
textLabel.font = UIFont.systemFont(ofSize: 10)
self.addSubview(textLabel)
}
let lineLayer = CAShapeLayer(layer: layer)
lineLayer.lineWidth = 1
lineLayer.strokeColor = UIColor.black.cgColor
lineLayer.path = linePath.cgPath
lineLayer.fillColor = nil
self.layer.addSublayer(lineLayer)
//設(shè)置動(dòng)畫
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 3;
pathAnimation.repeatCount = 1;
pathAnimation.isRemovedOnCompletion = true;
pathAnimation.fromValue = NSNumber(value: 0.0)
pathAnimation.toValue = NSNumber(value: 1.0)
lineLayer.add(pathAnimation, forKey: "strokeEnd")
pathAnimation.delegate = self
}
使用
let array: NSArray = [1342,2123,1654,1795];
let chartView = ChartView(frame: CGRect(x: 0, y: 70, width: 320, height: 250), array: array);
self.view.addSubview(chartView)
