[Swift]使用Charts绘制饼状图

项目中用到了饼状图,在GitHub上搜索到一个比较好用的图表库Chars,里面包含了基本见过的各种图表库,这个项目的作者是danielgindi,这个项目是MPAndroidChart对应的Apple平台的版本(iOS/tvOS/OSX均支持),本文仅对饼状图进行使用,后续将陆续支持其他图表

[Swift]使用Charts绘制饼状图_第1张图片
PieChart.gif

初始化PieChartView

 var months = ["1-9", "10-19", "20-29", "30-39","40-49", "50-59", "60-69", "70以上"]
    var unitsSold = [30.0, 100.0, 108.0, 60.0, 50.0, 160.0, 187.0, 60.0]
    
    fileprivate lazy var pieChartView: PieChartView = {
        let pieChartView = PieChartView()
        pieChartView.backgroundColor = UIColor(r: 230, g: 253, b: 253)
        //基本样式
        pieChartView.delegate = self
        return pieChartView
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "pie chart"
        
        
        view.addSubview(pieChartView)
        pieChartView.snp.makeConstraints { (make) in
            make.left.equalTo(self.view).offset(5)
            make.top.equalTo(self.view).offset(64)
            make.right.equalTo(self.view).offset(-5)
            make.height.equalTo(300)
        }
}

设置数据


    func setChart(dataPoints: [String], values: [Double]) {
        var dataEntries: [ChartDataEntry] = []
        for i in 0..

设置配置

  //设置饼状图字体配置
    func setPieChartDataSetConfig(pichartDataSet: PieChartDataSet){
        pichartDataSet.sliceSpace = 0 //相邻区块之间的间距
        pichartDataSet.selectionShift = 8 //选中区块时, 放大的半径
        pichartDataSet.xValuePosition = .insideSlice //名称位置
        pichartDataSet.yValuePosition = .outsideSlice //数据位置
        //数据与区块之间的用于指示的折线样式
        pichartDataSet.valueLinePart1OffsetPercentage = 0.85 //折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
        pichartDataSet.valueLinePart1Length = 0.5 //折线中第一段长度占比
        pichartDataSet.valueLinePart2Length = 0.4 //折线中第二段长度最大占比
        pichartDataSet.valueLineWidth = 1 //折线的粗细
        pichartDataSet.valueLineColor = UIColor.gray //折线颜色
        
        
    }
    
    //设置饼状图字体样式
    func setPieChartDataConfig(pieChartData: PieChartData){
        pieChartData.setValueFormatter(DigitValueFormatter())//设置百分比
        
        pieChartData.setValueTextColor(UIColor.gray) //字体颜色为白色
        pieChartData.setValueFont(UIFont.systemFont(ofSize: 10))//字体大小
    }
    
    
    //设置饼状图中心文本
    func setDrawHoleState(){
        ///饼状图距离边缘的间隙
        pieChartView.setExtraOffsets(left: 30, top: 0, right: 30, bottom: 0)
        //拖拽饼状图后是否有惯性效果
        pieChartView.dragDecelerationEnabled = true
        //是否显示区块文本
        pieChartView.drawSlicesUnderHoleEnabled = true
        //是否根据所提供的数据, 将显示数据转换为百分比格式
        pieChartView.usePercentValuesEnabled = true

        // 设置饼状图描述
        pieChartView.chartDescription?.text = "饼状年龄库图示例"
        pieChartView.chartDescription?.font = UIFont.systemFont(ofSize: 10)
        pieChartView.chartDescription?.textColor = UIColor.gray
        
        // 设置饼状图图例样式
        pieChartView.legend.maxSizePercent = 1 //图例在饼状图中的大小占比, 这会影响图例的宽高
        pieChartView.legend.formToTextSpace = 5 //文本间隔
        pieChartView.legend.font = UIFont.systemFont(ofSize: 10) //字体大小
        pieChartView.legend.textColor = UIColor.gray //字体颜色
        pieChartView.legend.verticalAlignment = .bottom //图例在饼状图中的位置
        pieChartView.legend.form = .circle //图示样式: 方形、线条、圆形
        pieChartView.legend.formSize = 12 //图示大小
        pieChartView.legend.orientation = .horizontal
        pieChartView.legend.horizontalAlignment = .center
        
//        pieChartView.centerText = "平均库龄" //饼状图中心的文本
        ////饼状图中心的富文本文本
        let attributes = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: CGFloat(15.0)), NSForegroundColorAttributeName: UIColor.gray]
        let centerTextAttribute = NSAttributedString(string: "平均库龄", attributes: attributes)
        pieChartView.centerAttributedText = centerTextAttribute



        /*
        ///设置饼状图中心的文本
        if pieChartView.isDrawHoleEnabled {
        ///设置饼状图中间的空心样式
            pieChartView.drawHoleEnabled = true //饼状图是否是空心
            pieChartView.holeRadiusPercent = 0.5 //空心半径占比
            pieChartView.holeColor = UIColor.clear //空心颜色
            pieChartView.transparentCircleRadiusPercent = 0.52 //半透明空心半径占比
            pieChartView.transparentCircleColor = UIColor(r: 210, g: 145, b: 165, 0.3) //半透明空心的颜色
            pieChartView.drawCenterTextEnabled = true //是否显示中间文字
            //普通文本
            //pieChartView.centerText = "平均库龄"
            //富文本
            let attributes = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: CGFloat(15.0)), NSForegroundColorAttributeName: UIColor.red]
            let centerTextAttribute = NSAttributedString(string: "平均库龄", attributes: attributes)
            pieChartView.centerAttributedText = centerTextAttribute
        }
         */
        
        pieChartView.setNeedsDisplay()


    }

将对于的数值转化为百分比,

//        pieChartData.setValueFormatter(DigitValueFormatter() //设置百分比
//转化为带%
class DigitValueFormatter: NSObject, IValueFormatter {
    func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String {
        let valueWithoutDecimalPart = String(format: "%.2f%%", value)
        return valueWithoutDecimalPart

    }

代理方法

//MARK: -- ChartViewDelegate

//点击空白地区
    func chartValueNothingSelected(_ chartView: ChartViewBase) {

    }
    //点击饼状图上的事件
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
        let al = UIAlertController.init(title: nil, message: "点击的是:\(months[Int(highlight.x)])  值为: \(highlight.y)", preferredStyle: .alert)
        let cancel = UIAlertAction.init(title: "知道了", style: .cancel, handler: nil)
        al.addAction(cancel)
        self.present(al, animated: true, completion: nil)
    }

你可能感兴趣的:([Swift]使用Charts绘制饼状图)