Swift - 第三方图表库Charts使用详解21(饼状图1:基本用法)
作者:hangge | 2018-09-05 08:10
一、基本用法
1,一个简单的样例
(1)效果图
- 下面随机生成 5 条数据组成饼状图。
- 点击某个扇区时该扇区会伸出显示。
(2)样例代码
import UIKit import Charts class ViewController: UIViewController { //饼状图 var chartView: PieChartView! override func viewDidLoad() { super.viewDidLoad() //创建饼图组件对象 chartView = PieChartView() chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40, height: 260) self.view.addSubview(chartView) //生成5条随机数据 let dataEntries = (0..<5).map { (i) -> PieChartDataEntry in return PieChartDataEntry(value: Double(arc4random_uniform(50) + 10), label: "数据\(i)") } let chartDataSet = PieChartDataSet(values: dataEntries, label: "数据分布") //设置颜色 chartDataSet.colors = ChartColorTemplates.vordiplom() + ChartColorTemplates.joyful() + ChartColorTemplates.colorful() + ChartColorTemplates.liberty() + ChartColorTemplates.pastel() let chartData = PieChartData(dataSet: chartDataSet) //设置饼状图数据 chartView.data = chartData } }
2,禁用图表旋转功能
默认情况下,我们可以使用手指转动饼图。如果不需要该功能,只需将 rotationEnabled 设置为 false 即可。
chartView.rotationEnabled = false //禁用旋转功能
3,修改选中扇区的伸出长度
注意:如果将 selectionShift 设置为 0,扇区点击后则不会变化。
chartDataSet.selectionShift = 5
4,设置饼图中央的标题文字
chartView.centerText = "我是饼状图"
5,带图标的扇区
下面样例在所有数值超过 40 的扇区中显示个星星图标。注意:为防止图标与文字重合,这里通过设置偏移量将图标显示在文字上方。
//生成5条随机数据 let dataEntries = (0..<5).map { (i) -> PieChartDataEntry in let value = Double(arc4random_uniform(50) + 10) //只要值超过80都会带有一个小图标 if value > 40 { return PieChartDataEntry(value: value, label: "数据\(i)", icon: UIImage(named: "icon")) } else { return PieChartDataEntry(value: value, label: "数据\(i)") } } let chartDataSet = PieChartDataSet(values: dataEntries, label: "数据分布") chartDataSet.iconsOffset = CGPoint(x: -23, y: 0) //设置图标的偏移量
6,设置扇区间隔
默认情况下各个扇区是相互紧挨着的,我们可以对其设置个间隔距离。
chartDataSet.sliceSpace = 3 //扇区间隔为3
7,修改字体样式和颜色。
chartData.setValueFont(.systemFont(ofSize: 11, weight: .light)) //字体修改 chartData.setValueTextColor(.red) //颜色修改
8,数值格式化显示
(1)在数值前面添加一个美元符号($)
let formatter = NumberFormatter() //自定义格式 formatter.positivePrefix = "$" //数字前缀单位 chartData.setValueFormatter(DefaultValueFormatter(formatter: formatter))
(2)将数值转换成百分占比显示(百分比形式)
//将数值转化为百分比 chartView.usePercentValuesEnabled = true //数值百分比格式化显示 let pFormatter = NumberFormatter() pFormatter.numberStyle = .percent pFormatter.maximumFractionDigits = 1 pFormatter.multiplier = 1 pFormatter.percentSymbol = "%" chartData.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))
9,不显示数值
chartDataSet.drawValuesEnabled = false
10,设置空心部分的样式
chartView.holeRadiusPercent = 0.382 //空心半径黄金比例 chartView.holeColor = UIColor.black //空心颜色设置为灰色 chartView.transparentCircleRadiusPercent = 0.5 //半透明空心半径
11,显示实心饼图
(1)中央部分仍然保持半透明
chartView.holeRadiusPercent = 0 //空心半径为0 chartView.transparentCircleRadiusPercent = 0.25 //半透明半径比例
(2)完全实心显示
chartView.drawHoleEnabled = false //这个饼是实心的
全部评论(1)
航哥,Charts可以绘制3D的吗
站长回复:目前来看还不支持。