swift 自定义画渐变色折线图
Github上的demo下载地址:https://github.com/JayFwj/swift---/tree/master/publicVersion
==============================================================================================================
========== 以下是自定义折线图的类 =======================
==============================================================================================================
// 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, txtColor:self.titleColor, x: x, y: y)
x += size.width
//右面说明标签的字符串
let rightStr =graphData.unitStr
size = SwiftUtil.measureTxt(rightStr, font:self.titleFont)
x = (viewWidth - (size.width + paddingRight))
self.drawText(rightStr, font:self.titleFont, txtColor:self.totalColor, x: x, 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, y,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, y,self.graphItemWidth, 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, y:CGFloat)
{
let layer =CALayer()
layer.frame =CGRectMake(0, y,CGRectGetWidth(self.frame),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, (x - lineWidth /2),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!
}
==============================================================================================================
========== 以下调用折线图的viewController =======================
==============================================================================================================
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, font:UIFont, txtColor:UIColor, 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 自定义画渐变色折线图相关推荐
- matplotlib画的折线图
文章最前: 我是Octopus,这个名字来源于我的中文名--章鱼:我热爱编程.热爱算法.热爱开源.所有源码在我的个人github :这博客是记录我学习的点点滴滴,如果您对 Python.Java.AI ...
- python_pyecharts画三维折线图
1.摘要 本文主要讲解:使用python中的pyecharts画三维折线图 主要思路: 将数据处理成[[x-],[y-],[z-]]的形式 使用Line3D函数渲染 2.数据介绍 数据为简单的三维数据 ...
- 画Excel折线图的一点记录
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一.画Excel折线图的一点记录 二.步骤 提示:以下是本篇文章正文内容,下面案例可供参考 一.画Excel折线图的一点记录 ...
- python plt 画动态折线图
python plt 画动态折线图 # coding=utf-8import matplotlib.pyplot as plt import numpy as npdef main():plt_lis ...
- python简单代码画曲线图教程-用Python画论文折线图、曲线图?几个代码模板轻松搞定!...
前言 这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
- python画折线图代码-用Python画论文折线图、曲线图?几个代码模板轻松搞定!
前言 这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
- python画折线图详解-利用python画出折线图
本文实例为大家分享了python画折线图的具体代码,供大家参考,具体内容如下 # encoding=utf-8 import matplotlib.pyplot as plt from pylab i ...
- python画折线图-利用python画出折线图
本文实例为大家分享了python画折线图的具体代码,供大家参考,具体内容如下 # encoding=utf-8 import matplotlib.pyplot as plt from pylab i ...
- matlab 折线图_用Python画论文折线图、曲线图?几个代码模板轻松搞定!
前言 这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
最新文章
- Java项目:在线小说阅读系统(读者+作者+管理员)(java+SSM+jsp+mysql+maven)
- 彻底理解js中this的指向
- poj 1737男人八题之一 orz ltc
- java pdfbox2 中文乱码,如何从PDFBox 2.0.2中的PDDocument提取字体
- jakarta ee_Jakarta EE贡献–入门
- 【CodeForces - 764A】Taymyr is calling you (找规律,水题)
- 魅族6支持html吗,魅族手机浏览器兼容性调优最佳实践_html/css_WEB-ITnose
- java显示字母数字组合_Java字母加数字组合比较大小
- 请教如何实现UITextField值变化的实时监视
- jquery ui 发布jquery.ui-1.6rc4版本,漂亮多了
- 浅谈Spring如何利用三个缓存Map解决循环依赖
- matlab实现匹配滤波器实验报告,匹配滤波器的仿真实验报告
- 计算机点击右键管理闪退,Win7系统桌面鼠标右键菜单出现闪退解决方法
- 2020-2022年最全湖南省矢量数据(路网含城市道路、铁路(包括地铁、轻轨)高速、国道、省道、县道、乡道+几百万个poi数据+省市县乡镇行政区划+河流水系网+建筑轮廓+30米dem等shp数据
- SC软件结构图_例题
- http保持状态的4种方法
- [笔录]博客及源程序 出处
- php 文本域,关于使用文本域(TextArea)的一个问题
- WPS/WORD论文格式调整方法
- 人工智能的马克思主义审视