ios charts图形插件 饼图pieView swift使用教程加封装(赋demo)

运行效果

安装

使用cocoa pod 安装
新建 podfile文件里面添加
pod ‘Charts’
pod ‘SnapKit’, ‘~> 5.0.0’

SnapKit可以不加,但是我封装的代码里面要用约束布局,所以添加snipkit

在要使用的地方 引入库:

import Charts
import SnapKit

饼图创建

var pieV = PieChartView()

设置UI

 view.addSubview(pieV)
        
        pieV.snp.makeConstraints { (make) in
            make.left.equalToSuperview()
            make.top.equalToSuperview()
            make.height.equalToSuperview()
            make.width.equalToSuperview()
        }
        pieV.centerText = "中心文字"
        /*
         //富文本打开这里的注释
        let centerAttributedText = NSMutableAttributedString(string: pieV.centerText ?? "")
        centerAttributedText.setAttributes([
            NSAttributedString.Key.foregroundColor: UIColor.red
        ], range: NSRange(location: 0, length: "中心".count))
//        中心文字 富文本
        pieV.centerAttributedText = centerAttributedText
 */
        //空表时显示的文本
        pieV.noDataText = "暂无数据";
        pieV.noDataFont = UIFont.systemFont(ofSize: 12)

设置数据

//生成10个随机数据
        let pieItems = (0 ..< 10).map{
            return (Double(arc4random() % 1000),"第\($0)个数据")
        }
        v1.pieItems = pieItems
        v1.dataSetText = ""//下面文字最右边的标题
        v1.pieV.centerText = "30%\n出勤率"
        v1.pieV.legend.font = UIFont.systemFont(ofSize: 7)
		let entries = pieItems.map {
             PieChartDataEntry(value: $0, label: $1)
        }
        dataSet = PieChartDataSet(entries: entries, label: dataSetText)
        //设置颜色
        dataSet.colors = ChartColorTemplates.vordiplom()
            + ChartColorTemplates.joyful()
            + ChartColorTemplates.colorful()
            + ChartColorTemplates.liberty()
            + ChartColorTemplates.pastel()
            + ChartColorTemplates.material()
        dataSet.selectionShift = 5
        
        
        //设置文字字体
        
        dataSet.entryLabelFont = UIFont.systemFont(ofSize: 12)//饼图里面文字大小
        dataSet.valueFont = UIFont.systemFont(ofSize: 12)//饼图里面数字大小
        //文字颜色
        dataSet.entryLabelColor = UIColor.black
        
        //数字颜色
        dataSet.valueTextColor = UIColor.black
        
        
//        dataSet.valueLinePart1OffsetPercentage = 0.8
//        dataSet.valueLinePart1Length = 0.2
//        dataSet.valueLinePart2Length = 0.4
        dataSet.yValuePosition = .outsideSlice//让数字被连线到在饼图外面
        
        //设置饼图视图数据
        let data = PieChartData(dataSet: dataSet)
        //设置前缀
        /*
        let formatter = NumberFormatter()  //自定义格式
        formatter.positivePrefix = "$"  //数字前缀单位
        data.setValueFormatter(DefaultValueFormatter(formatter: formatter))
 */
        
        pieV.data =  data
        
        //设置图例
        let l = pieV.legend
        
        l.font = UIFont.systemFont(ofSize: 20)
        l.form = .square
         
        l.textColor = UIColor.gray
        l.horizontalAlignment = .right//对其方式靠右
        l.verticalAlignment = .center//对其方式居中
        l.orientation = .vertical
        l.xEntrySpace = 10
        l.yEntrySpace = 0
        l.yOffset = 0
        pieV.entryLabelColor = .white
        pieV.entryLabelFont = .systemFont(ofSize: 12, weight: .light)
        pieV.animate(xAxisDuration: 1, easingOption: .easeOutBack)
        

整体封装代码

//
//  TDWXIBSet.swift
//  XibInXibDemo
//
//  Created by tdw on 2021/2/12.
//  Copyright © 2021 谭迪文. All rights reserved.
import UIKit
import Foundation
protocol TDWXIBSet where Self:UIView {
}

extension TDWXIBSet {
    func setXib(){
        // 需要这句代码，不能直接写UINib(nibName: "MyView", bundle: nil)，不然不能在storyboard中显示
        let bundle = Bundle(for: type(of: self))
        let className = "\(Self.self)"
        let nib = UINib(nibName: className, bundle: bundle)
        let view = (nib.instantiate(withOwner: self, options: nil)[0] as! UIView)
        view.frame = bounds
        self.addSubview(view)
    }
}

//
//  TDWCharstPieView.swift
//  Charts_Demo
//
//  Created by 谭迪文 on 2021/7/23.
//

import UIKit
import Charts
import SnapKit
class TDWCharstPieView: UIView,TDWXIBSet {
    @IBOutlet var view: UIView!
    
    var pieItems = [(Double,String)](){
        didSet{
            setData()
        }
    }
    var pieV = PieChartView()
    var dataSetText = ""//下面文字最右边的标题
    var dataSet = PieChartDataSet()
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setXib()
        setUI()
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        setXib()
        setUI()
    }
    func setUI(){
        view.addSubview(pieV)
        
        pieV.snp.makeConstraints { (make) in
            make.left.equalToSuperview()
            make.top.equalToSuperview()
            make.height.equalToSuperview()
            make.width.equalToSuperview()
        }
        pieV.centerText = "中心文字"
        /*
         //富文本打开这里的注释
        let centerAttributedText = NSMutableAttributedString(string: pieV.centerText ?? "")
        centerAttributedText.setAttributes([
            NSAttributedString.Key.foregroundColor: UIColor.red
        ], range: NSRange(location: 0, length: "中心".count))
//        中心文字 富文本
        pieV.centerAttributedText = centerAttributedText
 */
        //空表时显示的文本
        pieV.noDataText = "暂无数据";
        pieV.noDataFont = UIFont.systemFont(ofSize: 12)
    }
    func setData(){
        let entries = pieItems.map {
             PieChartDataEntry(value: $0, label: $1)
        }
        dataSet = PieChartDataSet(entries: entries, label: dataSetText)
        //设置颜色
        dataSet.colors = ChartColorTemplates.vordiplom()
            + ChartColorTemplates.joyful()
            + ChartColorTemplates.colorful()
            + ChartColorTemplates.liberty()
            + ChartColorTemplates.pastel()
            + ChartColorTemplates.material()
        dataSet.selectionShift = 5
        
        
        //设置文字字体
        
        dataSet.entryLabelFont = UIFont.systemFont(ofSize: 12)//饼图里面文字大小
        dataSet.valueFont = UIFont.systemFont(ofSize: 12)//饼图里面数字大小
        //文字颜色
        dataSet.entryLabelColor = UIColor.black
        
        //数字颜色
        dataSet.valueTextColor = UIColor.black
        
        
//        dataSet.valueLinePart1OffsetPercentage = 0.8
//        dataSet.valueLinePart1Length = 0.2
//        dataSet.valueLinePart2Length = 0.4
        dataSet.yValuePosition = .outsideSlice//让数字被连线到在饼图外面
        
        //设置饼图视图数据
        let data = PieChartData(dataSet: dataSet)
        //设置前缀
        /*
        let formatter = NumberFormatter()  //自定义格式
        formatter.positivePrefix = "$"  //数字前缀单位
        data.setValueFormatter(DefaultValueFormatter(formatter: formatter))
 */
        
        pieV.data =  data
        
        //设置图例
        let l = pieV.legend
        
        l.font = UIFont.systemFont(ofSize: 20)
        l.form = .square
         
        l.textColor = UIColor.gray
        l.horizontalAlignment = .right//对其方式靠右
        l.verticalAlignment = .center//对其方式居中
        l.orientation = .vertical
        l.xEntrySpace = 10
        l.yEntrySpace = 0
        l.yOffset = 0
        pieV.entryLabelColor = .white
        pieV.entryLabelFont = .systemFont(ofSize: 12, weight: .light)
        pieV.animate(xAxisDuration: 1, easingOption: .easeOutBack)
        
    }
}

调用代码

@IBOutlet weak var v1: TDWCharstPieView!
    

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.  
        //生成10个随机数据
        let pieItems = (0 ..< 10).map{
            return (Double(arc4random() % 1000),"第\($0)个数据")
        }
        v1.pieItems = pieItems
        v1.dataSetText = ""//下面文字最右边的标题
        v1.pieV.centerText = "30%\n出勤率"
        v1.pieV.legend.font = UIFont.systemFont(ofSize: 7)
        //        v1.view.backgroundColor = UIColor.blue
    }

demo下载地址点击我