最近做项目的时候，遇到需要做一个折线图的需求。
做好之后像下图。
折线图.png
使用的时候只需要三个代理函数：
调用界面：
class ViewController: UIViewController {
var dataSource:[CGFloat] = [CGFloat]()
var titleSource:[String] = [String]()
override func viewDidLoad() {
super.viewDidLoad()
self.dataSource = [645,546,695,654,2666,1954,956,4265]
self.titleSource = ["6月1号","2","3","4","5","6","7","8"]
let v:FBLineChartView = FBLineChartView.init(delegate: self)
v.Y = 100
self.view.addSubview(v)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
代理函数：
extension ViewController:LineChartViewDelegate{
/// 单位字符
///
/// - Returns: 垂直单位字符
func verticalUnitText() -> String {
return "/美元"
}
/// 底部水平上的展示文字
///
/// - Parameter index: 位置，从左至右 0-N N取决于设定的默认格栅数
/// - Returns: 展示文字的内容
func horizontalText(atIndex index:NSInteger)->String{
return self.titleSource[index]
}
/// 图表中的值
///
/// - Returns: 展示
func values() -> [CGFloat] {
return self.dataSource
}
}
效果：
初始设置.png
解释
- 竖直方向的 标识 区段会由给的数值计算出来。
区段.png
- 内部可以调节每个细节的颜色。有以下方法可调用。
// MARK: - 颜色初始化设置
extension FBLineChartView{
/// 设置背景色
func setBackGColor(_ color:UIColor = UIColor.init(RGBA: DefaultBackgroundColor)) {
self.backgroundColor = color
}
/// 设置虚线的颜色
func setDashLineColor(_ color:UIColor = UIColor.init(RGBA: DefaultDashLineColor)){
self.dashColor = color
}
/// 设置折线的颜色
func setCrossLineColor(_ color:UIColor = UIColor.init(RGBA: DefaultCrossLineColor)){
self.crossColor = color
}
/// 设置 区段 和 下方 时序文字的颜色
func setAnnotateTitleColor(_ color:UIColor = APPLINECOLOR){
self.annotateTitleColor = color
}
/// 设置单位的颜色
func setUnitColor(_ color:UIColor = APPGRAYBLACKCOLOR) {
self.unitColor = color
}
/// 设置遮罩颜色
func setMaskColor(_ color:UIColor = APPGRAYBLACKCOLOR){
self.maskColor = color
}
/// 隐藏水平虚线
func hiddenHorLine(_ isHidden:Bool){
self.scrollView.hiddenHorLine(isHidden)
}
/// 隐藏垂直虚线
func hiddenVerLine(_ isHidden:Bool){
self.scrollView.hiddenVerLine(isHidden)
}
/// 设置折线点的颜色
func chartPointColor(_ color:UIColor){
self.scrollView.chartPointColor(color)
}
/// 设置数值的颜色
func setValueTitleColor(_ color:UIColor){
self.scrollView.vallueTitleColor(color)
}
}
- 刷新数据。
如果需要刷新数据，只需要像下面这样，修改相应的设置，然后调用refreshUIData即可
self.dataSource = [20,56,84,92,41,65,48,62]
v.setBackGColor(UIColor.init(RGBA: "#008B8B"))
v.setUnitColor(UIColor.red)
v.refreshUIData()
刷新结果：
刷新后1.png
刷新后2.png
- 缺点： 没有做复用机制，如果是数据量太多的话，会导致内存使用增加。测试 1000个数据的话大概会多出40M的使用内存。同时会带来性能上的影响。处理方式：可以采用刷新机制，单批处理数据。
