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