Skip to content

chkkassd/SSFGraph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SSFGraph

version platform license
1.0.3 iOS MIT

这是一个用函数式思想开发的图表库,参考了《Functional Swift》这本书,主要是思想上的改变,以前我们着重于如何画图,而现在我们先思考如何来描述一个图表,然后再去绘制它。默认提供了柱状图,折线图,散点图,并且提供了一系列组合算子给用户,可以让用户自己设计组装自己的图表。另外一个重要的思想是在描述图表的时候,使用函数来描述简单的图形,然后再使用一些拼接函数将简单图形拼装,最终组成想要的图表。


效果图

图表效果图

环境要求

  • iOS9.0+
  • swift4.0

安装

Carthage

github "chkkassd/SSFGraph"

使用说明

所有使用SSFGraph拼装而成的图表均是相对尺寸,会随着绘制这些图表的view的大小而等比例缩放

柱状图

//数据源
let data = [("Shanghai", 2500.0),("Beijing", 3200.0),("Houston", 300.0),("New York", 1500.0),("Berlin", 1400.0)]
var graphView = SSFBarGraphView(frame: CGRect(x: 0, y: 50, width: UIScreen.main.bounds.width, height: 400), sourceData: data)
//设置柱状条颜色
graphView.barColor = UIColor.green
//设置柱状条的边界颜色
graphView.strokeColor = UIColor.black
//设置字体颜色
graphView.textColor = UIColor.darkGray
//设置字体样式和大小
graphView.textFont = UIFont.systemFont(ofSize: 16)
self.view.addSubview(graphView)

折线图

//数据源
let data = [("Shanghai", 2500.0),("Beijing", 3200.0),("Houston", 300.0),("New York", 1500.0),("Berlin", 1400.0)]
var graphView = SSFLineGraphView(frame: CGRect(x: 0, y: 50, width: UIScreen.main.bounds.width, height: 400), sourceData: data)
//设置字体颜色
graphView.textColor = UIColor.darkGray
//设置字体样式和大小
graphView.textFont = UIFont.systemFont(ofSize: 16)
//设置折线宽度
graphView.lineWidth = 4.0
//这只折线颜色
graphView.lineColor = UIColor.red
//在数据点是否突出显示
graphView.isOutstanding = true
self.view.addSubview(graphView)

散点图

let data = [("Shanghai", 2500.0),("Beijing", 3200.0),("Houston", 300.0),("New York", 1500.0),("Berlin", 1400.0)]
var graphView = SSFScatterGraphView(frame: CGRect(x: 0, y: 50, width: UIScreen.main.bounds.width, height: 400), sourceData: data)
//        graphView.barColor = UIColor.green   //折线图和散点图默认无法改这个属性
//        graphView.strokeColor = UIColor.black //折线图和散点图默认无法改这个属性
//设置字体颜色
graphView.textColor = UIColor.darkGray
//设置字体样式和大小
graphView.textFont = UIFont.systemFont(ofSize: 16)
//设置散点颜色
graphView.scatterColor = UIColor.orange
//设置散点样式
graphView.scatterType = .circle//.circle表示圆形,.square表示正方形
self.view.addSubview(graphView)

自定义绘图

在任意UIView内,使用下述api便可以绘制所能组合的图表。

描述矩形

let blueRect = Diagram.rect(width: 30.0, height: 15.0)

描述正方形

let redSquare = Diagram.square(side: 50.0)

描述圆形

let greenCircle = Diagram.circle(diameter: 80.0)

描述文字

let orangeText = Diagram.text(theText: "James Harden", width: 50.0, height: 10.0, textAttribute: [TextAttribute.font: UIFont.systemFont(ofSize: 20.0), TextAttribute.textColor: UIColor.orange])

TextAttribute是enum用以描述文字属性

public enum TextAttribute {
case font
case textColor
}

图表的填充色

blueRect.filled(UIColor.blue)

图表的描边色

blueRect.stroked(UIColor.black)

图表的对齐方式

blueRect.aligned(to: CGPoint.top)

图表的组合拼装

let combinedDiagram = blueRect|||redSquare|||greenCircle---orangeText

拼接操作符
|||:水平方向拼接2个图表
---:垂直方向拼接2个图表

一个自定义拼装图表的例子

override func draw(_ rect: CGRect) {
//rect
let blueRect = Diagram.rect(width: 30.0, height: 15.0).filled(UIColor.blue).stroked(UIColor.black).aligned(to: CGPoint.top)
//square
let redSquare = Diagram.square(side: 50.0).filled(UIColor.red).stroked(UIColor.black).aligned(to: CGPoint.top)
//circle
let greenCircle = Diagram.circle(diameter: 80.0).filled(UIColor.green).stroked(UIColor.black).aligned(to: CGPoint.top)
//text
let orangeText = Diagram.text(theText: "James Harden", width: 50.0, height: 10.0, textAttribute: [TextAttribute.font: UIFont.systemFont(ofSize: 20.0), TextAttribute.textColor: UIColor.orange]).aligned(to: CGPoint.top)
let combinedDiagram = blueRect|||redSquare|||greenCircle---orangeText

let context = UIGraphicsGetCurrentContext()
context?.draw(combinedDiagram, in: rect)
}

联系方式

版权

SSFGraph is released under the MIT license.See LICENSEfor details.

About

You can use it to descibe graph what you want.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published