swift 自定义画渐变色折线图

概述Github上的demo下载地址：https://github.com/JayFwj/swift---/tree/master/publicVersion ============================================================================================================== ========== @H_404_0@

@H_404_0@Github上的demo下载地址：https://github.com/JayFwj/swift---/tree/master/publicVersion

@H_404_0@

@H_404_0@

@H_404_0@==============================================================================================================

@H_404_0@========== 以下是自定义折线图的类 =======================

@H_404_0@==============================================================================================================

// lineGraphVIEw.swift

// publicVersion

//

// Created by apple on 16/3/29.

// copyright © 2016年 Harrison. All rights reserved.

//

import UIKit

class lineGraphVIEwController:UIVIEw {

var graphData:lineGraphData!

//-----------------------

//定义高度

//-----------------------

//标题栏高度

let TitleRowHeight:CGfloat =35

//标题栏字体

let TitleFont =UIFont.systemFontOfSize(12)

//标题栏字体颜色

let Titlecolor =UIcolor.darkGraycolor()

//签收数量栏字体颜色

let signedcolor =UIcolor.orangecolor()

//总的数量颜色

let totalcolor =UIcolor.lightGraycolor()

var vIEwWIDth:CGfloat!

func setlineGraphData(lineGraphData:lineGraphData)

{

self.graphData = lineGraphData

let scrollVIEw =UIScrollVIEw(frame:CGRectMake(0,self.TitleRowHeight,CGRectGetWIDth(self.frame),CGRectGetHeight(self.frame) -self.TitleRowHeight))

//每一项的宽度

let dateItemWIDth =self.frame.size.wIDth /7.5

let count = lineGraphData.dataList[0].graphDataList.count

let w = (CGfloat(count ) * dateItemWIDth)

let vIEw =lineGraphVIEw()

vIEw.lineGraphData = lineGraphData

vIEw.backgroundcolor =UIcolor.whitecolor()

vIEw.frame =CGRectMake(0,0,w,CGRectGetHeight(self.frame) -TitleRowHeight)

scrollVIEw.addSubvIEw(vIEw)

scrollVIEw.contentSize =CGSizeMake(w,CGRectGetHeight(scrollVIEw.frame))

self.addSubvIEw(scrollVIEw)

}

/*

// Only overrIDe drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation. */

overrIDefunc drawRect(rect:CGRect) {

// Drawing code

vIEwWIDth = rect.size.wIDth

//-------------------------------------------------------------

self.drawTitlePart()

}

//画标题栏

func drawTitlePart()

{

let context =UIGraphicsGetCurrentContext()

//距离右面的间距

let paddingRight:CGfloat =15

var x:CGfloat =15

let y:CGfloat =0

var size =self.drawText(graphData.dateStr,Font:self.TitleFont,txtcolor:self.Titlecolor,x: x,y: y)

x += size.wIDth +10

size = self.drawText(graphData.TitleStr,Font: self.TitleFont,y: y)

x += size.wIDth

//右面说明标签的字符串

let rightStr =graphData.unitStr

size = SwiftUtil.measureTxt(rightStr,Font:self.TitleFont)

x = (vIEwWIDth - (size.wIDth + paddingRight))

self.drawText(rightStr,txtcolor:self.totalcolor,y:0)

self.drawAline(context!,y:0)

self.drawAline(context!,y:self.TitleRowHeight)

}

func drawAline(context:CGContext,y:CGfloat)

{

let layer =CALayer()

layer.frame =CGRectMake(0,y,vIEwWIDth,1)

layer.backgroundcolor =UIcolor.darkGraycolor().CGcolor

self.layer.addSublayer(layer)

}

func drawText(txt:Nsstring,Font:UIFont,txtcolor:UIcolor,x:CGfloat,y:CGfloat) ->CGSize

{

let size =SwiftUtil.measureTxt(txt,Font: Font)

let frame =CGRectMake(x,(TitleRowHeight - size.height)/2,size.wIDth,size.height)

let attributes =SwiftUtil.getAttribute(Font,textcolor: txtcolor)

txt.drawInRect(frame,withAttributes: attributes)

return size;

}

}

class lineGraphVIEw: UIVIEw

{

//日期栏的高度

let dateRowHeight:CGfloat =35

//折线图区域的高度

var graphHeight:CGfloat!

//折线图项宽

var graphItemWIDth:CGfloat!

var graphlinewidth:CGfloat =1.5

var verticallinewidth:CGfloat =1

var dotDiameter:CGfloat =8

var numberFont:UIFont =UIFont.systemFontOfSize(14)

var dateFont:UIFont =UIFont.systemFontOfSize(14)

var graphmargintop:CGfloat =20

//线的颜色

let linecolor =UIcolor.lightGraycolor().colorWithAlphaComponent(0.6)

let datecolor =UIcolor.darkGraycolor()

var lineGraphData:lineGraphData!

var itemScale:CGfloat!

overrIDefunc drawRect(rect:CGRect) {

let height = rect.size.height

self.graphHeight = (height -dateRowHeight)

self.graphItemWIDth =SwiftUtil.ScreenWIDth() /7.5

//得到数据中的最大项

var max =0

for(var i =0; i <self.lineGraphData.dataList.count; i++)

{

let tmax =self.lineGraphData.dataList[i].max

if(tmax > max)

{

max = tmax

}

}

//每一项的比率所占的百分比

itemScale = (self.graphHeight -graphmargintop) / CGfloat(max)

for(var i =0; i <self.lineGraphData.dataList.count; i++)

{

self.drawGraph(self.lineGraphData.dataList[i],textBelow: i % 2 == 0)

}

}

func drawGraph(graphDataList:GraphDataList,textBelow:Bool)

{

//先画折线再画点

//完整的折线路径

let fullPath =UIBezIErPath()

var lastPoint:CGPoint!

var theFirstPoint:CGPoint!

var maincolor = graphDataList.graphDataList[0].linecolor

for(var i =1; i < graphDataList.graphDataList.count; i++)

{

let lastOne = i -1

var item = graphDataList.graphDataList[lastOne]

var x = (CGfloat(lastOne) *self.graphItemWIDth);

self.drawVerticalline(x)

var dotX = (CGfloat(lastOne) *self.graphItemWIDth) + (self.graphItemWIDth) /2

var dotY = (self.graphHeight -CGfloat(item.data.floatValue) *itemScale)

let path =UIBezIErPath()

//上一个点

let firstPoint =CGPointMake(dotX,dotY)

path.movetoPoint(firstPoint)

//下一个点

item = graphDataList.graphDataList[i]

x = (CGfloat(i) *self.graphItemWIDth);

self.drawVerticalline(x)

dotX = (CGfloat(i) *self.graphItemWIDth) + (self.graphItemWIDth) /2

dotY = (self.graphHeight -CGfloat(item.data.floatValue) *itemScale )

let secondPoint =CGPointMake(dotX,dotY)

path.addlinetoPoint(secondPoint)

path.linewidth =self.graphlinewidth

item.linecolor.setstroke()

path.stroke()

}

//画第一条线和最后一条线

self.drawVerticalline(1)

self.drawVerticalline(CGfloat(graphDataList.graphDataList.count) * self.graphItemWIDth -1)

//数字距离点的间距

let padding:CGfloat =5

//具体数字的高度

let numSize =SwiftUtil.measureTxt("22",Font:self.numberFont)

let context =UIGraphicsGetCurrentContext()

//先画折线再画点

for(var i =0; i < graphDataList.graphDataList.count; i++)

{

let item = graphDataList.graphDataList[i]

let x = (CGfloat(i) *self.graphItemWIDth)

let dotX = x + (self.graphItemWIDth -self.dotDiameter) /2

let dotY = (self.graphHeight -CGfloat(item.data.floatValue) *itemScale - self.dotDiameter /2)

CGContextAddEllipseInRect(context,CGRectMake(dotX,dotY,self.dotDiameter,self.dotDiameter))

CGContextSetFillcolorWithcolor(context,item.dotcolor.CGcolor)

CGContextFillPath(context)

//画日期

let size =SwiftUtil.measureTxt(item.date,Font:self.dateFont)

var y =graphHeight + (self.dateRowHeight - size.height) /2

letframe =CGRectMake(x,self.graphItemWIDth,size.height)

SwiftUtil.drawText(item.date,Font:self.dateFont,txtcolor:self.datecolor,frame: frame)

//用于填充和渐变

let lineX = (CGfloat(i) *self.graphItemWIDth) + (self.graphItemWIDth) /2

let lineY = (self.graphHeight -CGfloat(item.data.floatValue) *itemScale)

//上一个点

let firstPoint =CGPointMake(lineX,lineY)

if(i ==0)

{

theFirstPoint = firstPoint

fullPath.movetoPoint(firstPoint)

}

else

{

fullPath.addlinetoPoint(firstPoint)

lastPoint = firstPoint

}

//画数字

if((graphDataList.showNumber) !=nil)

{

if(textBelow)

{

y = (dotY + self.dotDiameter + padding)

}else

{

y = (dotY - (size.height + padding))

if(y <0)

{

y = 0

}

}

let frame =CGRectMake(x,numSize.height)

SwiftUtil.drawText(item.date,Font:self.numberFont,txtcolor: item.linecolor,frame: frame)

}

}

if((graphDataList.showGradIEnt) !=nil)

{

CGContextSaveGState(context)

//将渐变色的路径设置完

fullPath.addlinetoPoint(CGPointMake(lastPoint.x,self.graphHeight))

//将渐变色的路径设置完

fullPath.addlinetoPoint(CGPointMake(theFirstPoint.x,self.graphHeight))

CGContextAddpath(context,fullPath.CGPath)

fullPath.addClip()

//创建渐变色

let colorSpaces =CGcolorSpaceCreateDeviceRGB()

let gradIEnt =CGGradIEntCreateWithcolors(colorSpaces,[maincolor.colorWithAlphaComponent(0.7).CGcolor,maincolor.colorWithAlphaComponent(0.2).CGcolor],[0,1.0])

CGContextDrawlinearGradIEnt(context,gradIEnt,CGPoint.zero,CGPointMake(0,self.graphHeight),CGGradIEntDrawingOptions.DrawsBeforeStartLocation)

CGContextRestoreGState(context)

}

//画日期上的分隔线

self.drawAline(context!,y:self.graphHeight)

}

//画横线

func drawAline(context:CGContext,1)

layer.backgroundcolor =UIcolor.darkGraycolor().CGcolor

self.layer.addSublayer(layer)

}

//画竖线

func drawVerticalline(x:CGfloat)

{

let linewidth:CGfloat =1

let context =UIGraphicsGetCurrentContext()

CGContextMovetoPoint(context,(x - linewidth /2),0)

CGContextAddlinetoPoint(context,self.graphHeight)

CGContextSetstrokecolorWithcolor(context,linecolor.CGcolor)

CGContextSetlinewidth(context,linewidth)

CGContextstrokePath(context)

}

}

class lineGraphData

{

var dateStr:Nsstring!

var TitleStr:Nsstring!

var unitStr:Nsstring!

var dataList:[GraphDataList]!

}

class GraphDataList {

var max:Int!

var showGradIEnt:Bool!

var showNumber:Bool!

var graphDataList:[GraphDataItem]!

}

class GraphDataItem {

var data:Nsstring!

var date:Nsstring!

var linecolor:UIcolor!

var dotcolor:UIcolor!

}

@H_404_0@==============================================================================================================

@H_404_0@========== 以下调用折线图的vIEwController =======================

@H_404_0@==============================================================================================================

@H_404_0@

import UIKit

class VIEwController: UIVIEwController {

overrIDefunc vIEwDIDLoad() {

super.vIEwDIDLoad()

// Do any additional setup after loading the vIEw,typically from a nib.

self.vIEw.backgroundcolor =UIcolor.whitecolor()

let height:CGfloat =350

let frame =CGRectMake(0,60,SwiftUtil.ScreenWIDth(),height)

let lineGraphVIEw =lineGraphVIEwController()

lineGraphVIEw.frame = frame

lineGraphVIEw.backgroundcolor =UIcolor.whitecolor()

lineGraphVIEw.setlineGraphData(self.getDataForlineGraph())

self.vIEw.addSubvIEw(lineGraphVIEw)

}

func getDataForlineGraph() ->lineGraphData

{

let data =lineGraphData()

data.dateStr ="2016-03"

data.TitleStr ="收支报表"

data.unitStr ="单位：元"

data.dataList = [GraphDataList]()

var max:Int =0

var linecolors = [UIcolor.greencolor(),UIcolor.bluecolor()]

// var tempRandomcolors = [UIcolor.greencolor(),UIcolor.bluecolor(),UIcolor.orangecolor(),UIcolor.purplecolor(),UIcolor.blackcolor()]

for(var j =0; j < linecolors.count; j++)

{

let graphaDataList =GraphDataList()

graphaDataList.graphDataList = [GraphDataItem]()

for(var i =0; i <31; i++)

{

let item =GraphDataItem()

//随机生成的出货票数

let total =arc4random_uniform(30) +1

item.data ="\(total)"

item.date ="\(i +1)"

//let ri = arc4random_uniform(UInt32(tempRandomcolors.count))

item.linecolor = linecolors[j]// tempRandomcolors[Int(ri)] // UIcolor.darkGraycolor()

item.dotcolor = linecolors[j]//UIcolor.orangecolor()

graphaDataList.graphDataList.append(item)

if(Int(total) > max)

{

max = Int(total);

}

}

graphaDataList.max = max;

data.dataList.append(graphaDataList)

}

return data;

}

}

//===================得到屏幕尺寸，测量文本宽度等的工具方法====================

//

// SwiftUtil.swift

// CRMForSwift

//

// Created by apple on 16/1/5.

// copyright © 2016年 Harrison. All rights reserved.

//

import UIKit

class SwiftUtil: NSObject {

classfunc ScreenWIDth() ->CGfloat

{

returnUIScreen.mainScreen().bounds.wIDth;

}

classfunc ScreenHeight() ->CGfloat

{

returnUIScreen.mainScreen().bounds.height;

}

classfunc StatebarHeight() ->CGfloat

{

returnUIApplication.sharedApplication().statusbarFrame.size.height;

}

classfunc getAppdelegate() ->AppDelegate

{

returnUIApplication.sharedApplication().delegateas!AppDelegate;

}

classfunc getAttribute(Font:UIFont,textcolor:UIcolor) ->[String:AnyObject]

{

let style =NSMutableParagraphStyle()

style.alignment =NSTextAlignment.Center

let attribute = [NSFontAttributename:Font,NSForegroundcolorAttributename:textcolor,

NSParagraphStyleAttributename:style]

return attribute

}

classfunc measureTxt(str:Nsstring,Font:UIFont) ->CGSize

{

let attributes = [NSFontAttributename:Font];

return str.sizeWithAttributes(attributes)

}

classfunc drawText(txt:Nsstring,frame:CGRect)

{

let attributes =SwiftUtil.getAttribute(Font,textcolor: txtcolor)

txt.drawInRect(frame,withAttributes: attributes)

}

}

Github上的demo下载地址：https://github.com/JayFwj/swift---/tree/master/publicVersion

总结

以上是内存溢出为你收集整理的swift 自定义画渐变色折线图全部内容，希望文章能够帮你解决swift 自定义画渐变色折线图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。