[Swift]使用Charts繪制餅狀圖

項(xiàng)目中用到了餅狀圖,在GitHub上搜索到一個(gè)比較好用的圖表庫(kù)Chars,里面包含了基本見(jiàn)過(guò)的各種圖表庫(kù),這個(gè)項(xiàng)目的作者是danielgindi,這個(gè)項(xiàng)目是MPAndroidChart對(duì)應(yīng)的Apple平臺(tái)的版本(iOS/tvOS/OSX均支持),本文僅對(duì)餅狀圖進(jìn)行使用,后續(xù)將陸續(xù)支持其他圖表

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)
        }
}

設(shè)置數(shù)據(jù)


    func setChart(dataPoints: [String], values: [Double]) {
        var dataEntries: [ChartDataEntry] = []
        for i in 0..<dataPoints.count {
            let entry = PieChartDataEntry(value: values[i], label: "\(dataPoints[i])") //設(shè)置數(shù)據(jù) title和對(duì)應(yīng)的值
            
            dataEntries.append(entry)
        }
        
        
        let pichartDataSet = PieChartDataSet(values: dataEntries, label: "年齡庫(kù)示例") //設(shè)置表示
        //設(shè)置餅狀圖字體配置
        setPieChartDataSetConfig(pichartDataSet: pichartDataSet)
        
        
        let pieChartData = PieChartData(dataSet: pichartDataSet)
        //設(shè)置餅狀圖字體樣式
        setPieChartDataConfig(pieChartData: pieChartData)
        pieChartView.data = pieChartData //將配置及數(shù)據(jù)添加到表中
        
        
        //設(shè)置餅狀圖樣式
        setDrawHoleState()
        
        var colors: [UIColor] = []
        for _ in 0..<dataPoints.count {
            colors.append(UIColor.randomColor())
        }
        
        pichartDataSet.colors = colors//設(shè)置區(qū)塊顏色
    }
    

設(shè)置配置

  //設(shè)置餅狀圖字體配置
    func setPieChartDataSetConfig(pichartDataSet: PieChartDataSet){
        pichartDataSet.sliceSpace = 0 //相鄰區(qū)塊之間的間距
        pichartDataSet.selectionShift = 8 //選中區(qū)塊時(shí), 放大的半徑
        pichartDataSet.xValuePosition = .insideSlice //名稱(chēng)位置
        pichartDataSet.yValuePosition = .outsideSlice //數(shù)據(jù)位置
        //數(shù)據(jù)與區(qū)塊之間的用于指示的折線(xiàn)樣式
        pichartDataSet.valueLinePart1OffsetPercentage = 0.85 //折線(xiàn)中第一段起始位置相對(duì)于區(qū)塊的偏移量, 數(shù)值越大, 折線(xiàn)距離區(qū)塊越遠(yuǎn)
        pichartDataSet.valueLinePart1Length = 0.5 //折線(xiàn)中第一段長(zhǎng)度占比
        pichartDataSet.valueLinePart2Length = 0.4 //折線(xiàn)中第二段長(zhǎng)度最大占比
        pichartDataSet.valueLineWidth = 1 //折線(xiàn)的粗細(xì)
        pichartDataSet.valueLineColor = UIColor.gray //折線(xiàn)顏色
        
        
    }
    
    //設(shè)置餅狀圖字體樣式
    func setPieChartDataConfig(pieChartData: PieChartData){
        pieChartData.setValueFormatter(DigitValueFormatter())//設(shè)置百分比
        
        pieChartData.setValueTextColor(UIColor.gray) //字體顏色為白色
        pieChartData.setValueFont(UIFont.systemFont(ofSize: 10))//字體大小
    }
    
    
    //設(shè)置餅狀圖中心文本
    func setDrawHoleState(){
        ///餅狀圖距離邊緣的間隙
        pieChartView.setExtraOffsets(left: 30, top: 0, right: 30, bottom: 0)
        //拖拽餅狀圖后是否有慣性效果
        pieChartView.dragDecelerationEnabled = true
        //是否顯示區(qū)塊文本
        pieChartView.drawSlicesUnderHoleEnabled = true
        //是否根據(jù)所提供的數(shù)據(jù), 將顯示數(shù)據(jù)轉(zhuǎn)換為百分比格式
        pieChartView.usePercentValuesEnabled = true

        // 設(shè)置餅狀圖描述
        pieChartView.chartDescription?.text = "餅狀年齡庫(kù)圖示例"
        pieChartView.chartDescription?.font = UIFont.systemFont(ofSize: 10)
        pieChartView.chartDescription?.textColor = UIColor.gray
        
        // 設(shè)置餅狀圖圖例樣式
        pieChartView.legend.maxSizePercent = 1 //圖例在餅狀圖中的大小占比, 這會(huì)影響圖例的寬高
        pieChartView.legend.formToTextSpace = 5 //文本間隔
        pieChartView.legend.font = UIFont.systemFont(ofSize: 10) //字體大小
        pieChartView.legend.textColor = UIColor.gray //字體顏色
        pieChartView.legend.verticalAlignment = .bottom //圖例在餅狀圖中的位置
        pieChartView.legend.form = .circle //圖示樣式: 方形、線(xiàn)條、圓形
        pieChartView.legend.formSize = 12 //圖示大小
        pieChartView.legend.orientation = .horizontal
        pieChartView.legend.horizontalAlignment = .center
        
//        pieChartView.centerText = "平均庫(kù)齡" //餅狀圖中心的文本
        ////餅狀圖中心的富文本文本
        let attributes = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: CGFloat(15.0)), NSForegroundColorAttributeName: UIColor.gray]
        let centerTextAttribute = NSAttributedString(string: "平均庫(kù)齡", attributes: attributes)
        pieChartView.centerAttributedText = centerTextAttribute



        /*
        ///設(shè)置餅狀圖中心的文本
        if pieChartView.isDrawHoleEnabled {
        ///設(shè)置餅狀圖中間的空心樣式
            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 = "平均庫(kù)齡"
            //富文本
            let attributes = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: CGFloat(15.0)), NSForegroundColorAttributeName: UIColor.red]
            let centerTextAttribute = NSAttributedString(string: "平均庫(kù)齡", attributes: attributes)
            pieChartView.centerAttributedText = centerTextAttribute
        }
         */
        
        pieChartView.setNeedsDisplay()


    }

將對(duì)于的數(shù)值轉(zhuǎn)化為百分比,

//        pieChartData.setValueFormatter(DigitValueFormatter() //設(shè)置百分比
//轉(zhuǎn)化為帶%
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

//點(diǎn)擊空白地區(qū)
    func chartValueNothingSelected(_ chartView: ChartViewBase) {

    }
    //點(diǎn)擊餅狀圖上的事件
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
        let al = UIAlertController.init(title: nil, message: "點(diǎn)擊的是:\(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)
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容