Chart组件为iOS平台提供了较为丰富的图表组件。其SPM地址:https://github.com/danielgindi/Charts
。使用时import Chart即可。组件的使用与一般控件类似。
一:LineChart(折线图)
1.基本创建:
import UIKit
import Charts
class OneVC: UIViewController {
var chartView: LineChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
chartView = LineChartView()
chartView.frame = CGRect(x: 10, y: 80, width: self.view.bounds.width - 20,
height: 300)
self.view.addSubview(chartView)
// 数据源
var dataEntries = [ChartDataEntry]()
let entry1 = BarChartDataEntry(x: Double(1), y: Double(10))
dataEntries.append(entry1)
for i in 2..<30 {
let y = Double(arc4random_uniform(35))
let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
dataEntries.append(entry)
}
// Every ChartDataSet as a data source of Chart.
let chartDataSet = LineChartDataSet(entries: dataEntries, label: "Temprature in My Location")
let chartData = LineChartData(dataSets: [chartDataSet])
chartView.data = chartData
// Do any additional setup after loading the view.
}
}
图示:
2. 数据源说明:
ChartDataEntry
:对应每个x轴与y轴的唯一一条数据。例如19号的温度为34摄氏度,那么上面的数据条目为ChartDataEntry.init(x: 19, y: 34.0)
[ChartDataEntry]()
: 存放数据条目的泛型集合LineChartDataSet
:许多条数据条目构成一组数据集,例如这里的温度为“我所在地点的温度”,那么可再来“在南京的温度”LineChartData
:Chart组件的数据源。可为多组
3.基本属性:
作用 | 语句 |
---|---|
组件背景颜色 | chartView.backgroundColor = .yellow |
无数据时提示文本 | chartView.noDataText = “暂无数据” |
折线图描述文字 | chartView.chartDescription?.text = “考试成绩” |
折线图描述颜色 | chartView.chartDescription?.textColor = UIColor.red |
取消Y轴缩放 | chartView.scaleYEnabled = false |
启用双击缩放 | chartView.doubleTapToZoomEnabled = true |
启用拖动手势 | chartView.dragEnabled = true |
拖拽后是否有惯性效果 | chartView.dragDecelerationEnabled = true |
拖拽摩擦系数 | chartView.dragDecelerationFrictionCoef = 0.9 |
绘制图形区域背景 | chartView.drawGridBackgroundEnabled = true |
绘制图形区域边框 | chartView.drawBordersEnabled = true |
图形区域背景颜色 | chartView.gridBackgroundColor = .yellow |
边框颜色 | chartView.borderColor = .blue |
边框大小 | chartView.borderLineWidth = 3 |
图例文字颜色 | chartView.legend.textColor = UIColor.purple |
图例文字大小 | chartView.legend.formSize = 5 |
图例头部样式 | chartView.legend.form = .line |
设置线条颜色 | chartDataSet.colors = [.orange] |
修改线条大小 | chartDataSet.lineWidth = 2 |
设置线条颜色为交替显示 | chartDataSet.colors = [.orange, .red] |
修改折点外圆颜色 | chartDataSet.circleColors = [.yellow] |
修改折点内圆颜色 | chartDataSet.circleHoleColor = .red |
修改折点外圆半径 | chartDataSet.circleRadius = 6 |
修改折点内圆半径 | chartDataSet.circleHoleRadius = 2 |
不显示折点 | chartDataSet.drawCirclesEnabled = false |
不显示内圆 | chartDataSet.drawCircleHoleEnabled = false |
以虚线显示折线 | chartDataSet.lineDashLengths = [4,2] |
以平滑曲线显示 | chartDataSet.mode = .horizontalBezier |
设置拐点文字颜色 | chartDataSet.valueColors = [.blue] |
设置拐点文字颜色 | chartDataSet.valueFont = .systemFont(ofSize: 9) |
不显示线条上的文字 | chartDataSet.drawValuesEnabled = false |
开启填充色绘制 | chartDataSet.drawFilledEnabled = true |
设置填充色 | chartDataSet.fillColor = .orange |
设置填充色透明度 | chartDataSet.fillAlpha = 0.5 |
只显示横向十字线 | chartDataSet.drawVerticalHighlightIndicatorEnabled = false |
只显示纵向十字线 | chartDataSet.drawHorizontalHighlightIndicatorEnabled = false |
不启用十字线 | chartDataSet.highlightEnabled = false |
设置 x 轴位置 | chartView.xAxis.labelPosition = .bottom |
设置 x 轴的颜色 | chartView.xAxis.axisLineColor = .orange |
设置 x 轴的宽度 | chartView.xAxis.axisLineWidth = 2 |
指定最小刻度值 | chartView.xAxis.axisMinimum = -15 |
指定最大刻度值 | chartView.xAxis.axisMaximum = 15 |
设置刻度文字颜色 | chartView.xAxis.labelTextColor = .orange |
设置刻度文字大小 | chartView.xAxis.labelFont = .systemFont(ofSize: 14) |
设置刻度文字倾斜角度 | chartView.xAxis.labelRotationAngle = -30 |
是否启用网格线 | chartView.xAxis.drawGridLinesEnabled = false |
自定义刻度标签文字 | let xValues = [“一月”,“二月”,“三月”,“四月”,“五月”,“六月”,“七月”,“八月”,“九月”,“十月”] chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues |
是否显示右侧 Y 轴的刻度文字 | chartView.rightAxis.drawLabelsEnabled = false |
是否显示右侧y轴 | chartView.rightAxis.enabled = false |
值反向排列 | chartView.leftAxis.inverted = true |
绘制0刻度线 | chartView.leftAxis.drawZeroLineEnabled = true |
添加限制线(可显示多个) | let limitLine = ChartLimitLine(limit: 85, label: “优秀”) chartView.leftAxis.addLimitLine(limitLine) |
设置限制线在图层中的显示 | chartView.leftAxis.drawLimitLinesBehindDataEnabled = true |
修改限制线文字位置 | limitLine.labelPosition = .leftTop |
是否显示限制线文字 | limitLine.drawLabelEnabled = false |
设置图标在界面上一次最多显示数据条目 | chartView.setVisibleXRangeMaximum(10) |
设置x轴方向动画 | chartView.animate(xAxisDuration: 1) |
设置y轴方向动画 | chartView.animate(yAxisDuration: 1) |
设置x、y轴一起显示动画 | chartView.animate(xAxisDuration: 1, yAxisDuration: 1) |
设置动画效果 | chartView.animate(yAxisDuration: 1, easingOption: .easeOutCubic) |
获得当前图片显示的图片内容 | let image = chartView.getChartImage(transparent: true) |
二:BarChart(柱状图)
1.基本创建:
import UIKit
import Charts
class TwoVC: UIViewController {
var chartView: BarChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
chartView = BarChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
var dataEntries2 = [BarChartDataEntry]()
let entry1 = BarChartDataEntry(x: Double(1), y: Double(10))
let entry2 = BarChartDataEntry(x: Double(2), y: Double(20))
let entry3 = BarChartDataEntry(x: Double(3), y: Double(17))
let entry4 = BarChartDataEntry(x: Double(4), y: Double(27))
let entry5 = BarChartDataEntry(x: Double(5), y: Double(25))
let entry6 = BarChartDataEntry(x: Double(6), y: Double(30))
let entry7 = BarChartDataEntry(x: Double(7), y: Double(33))
dataEntries2.append(entry1)
dataEntries2.append(entry2)
dataEntries2.append(entry3)
dataEntries2.append(entry4)
dataEntries2.append(entry5)
dataEntries2.append(entry6)
dataEntries2.append(entry7)
let chartDataSet = BarChartDataSet(entries: dataEntries2, label: "Temprature in Next Week")
let chartData = BarChartData(dataSets: [chartDataSet])
chartView.data = chartData
chartView.drawGridBackgroundEnabled = true
}
}
图示:
2. 数据源说明:
BarChartDataEntry
:对应每个条柱的唯一一条数据。例如第三天的温度为17摄氏度,那么上面的数据条目为ChartDataEntry.init(x: 3, y: 17.0)
[BarChartDataEntry]()
: 存放数据条目的泛型集合BarChartDataSet
:许多条数据条目构成一组数据集,例如这里的温度为“我所在地点的温度”,那么可再来“在南京的温度”BarChartData
:Chart组件的数据源。可为多组
3.基本属性:
作用 | 语句 |
---|---|
设置条柱的宽度(宽度基准为未设置状态下宽度) | chartData.barWidth = 0.5 |
开启阴背景阴影绘制 | chartView.drawBarShadowEnabled = true |
设置条柱颜色 | chartDataSet.colors = [.orange] |
轮替设置条柱颜色 | chartDataSet.colors = [.yellow, .orange, .red] |
设置条柱边框宽度 | chartDataSet.barBorderWidth = 1 |
设置条柱颜色 | chartDataSet.barBorderColor = .orange |
设置条柱的文字在顶部向下显示 | chartView.drawValueAboveBarEnabled = false |
三:ScatterChart(散点图)
1.基本创建:
import UIKit
import Charts
class ThreeVC: UIViewController {
var chartView: ScatterChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
chartView = ScatterChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
let dataEntries1 = (0..<10).map { (i) -> ChartDataEntry in
let val = Double(arc4random_uniform(100) + 3)
return ChartDataEntry(x: Double(i), y: val)
}
let chartDataSet1 = ScatterChartDataSet(entries: dataEntries1, label: "Audi")
var dataEntries2 = [BarChartDataEntry]()
let entry1 = BarChartDataEntry(x: Double(1), y: Double(10))
let entry2 = BarChartDataEntry(x: Double(2), y: Double(20))
let entry3 = BarChartDataEntry(x: Double(3), y: Double(30))
let entry4 = BarChartDataEntry(x: Double(4), y: Double(45))
let entry5 = BarChartDataEntry(x: Double(5), y: Double(45))
let entry6 = BarChartDataEntry(x: Double(6), y: Double(45))
let entry7 = BarChartDataEntry(x: Double(7), y: Double(55))
let entry8 = BarChartDataEntry(x: Double(8), y: Double(65))
let entry9 = BarChartDataEntry(x: Double(9), y: Double(35))
let entry10 = BarChartDataEntry(x: Double(10), y: Double(25))
dataEntries2.append(entry1)
dataEntries2.append(entry2)
dataEntries2.append(entry3)
dataEntries2.append(entry4)
dataEntries2.append(entry5)
dataEntries2.append(entry6)
dataEntries2.append(entry7)
dataEntries2.append(entry8)
dataEntries2.append(entry9)
dataEntries2.append(entry10)
let chartDataSet2 = ScatterChartDataSet(entries: dataEntries2, label: "Bnez")
chartDataSet2.setColor(.orange)
let chartData = ScatterChartData(dataSets: [chartDataSet1, chartDataSet2])
chartView.data = chartData
chartView.drawGridBackgroundEnabled = true
}
}
图示:
2. 数据源说明:
ChartDataEntry
:对应每个x轴与y轴构成的一个数据。例如Benz的第一个数据值为10.0,那么上面的数据条目为ChartDataEntry.init(x: 1, y: 10.0)
[ChartDataEntry]()
: 存放数据条目的泛型集合ScatterChartDataSet
:许多条数据条目构成一组数据集,本例中存在两组,一个为Audi,另一个为BenzScatterChartData
:Chart组件的数据源。可为多组
3.基本属性:
作用 | 语句 |
---|---|
设置某组散点图颜色 | chartDataSet.setColor(.black) |
设置散点大小 | chartDataSet1.scatterShapeSize = 5 |
设置散点中心颜色 | chartDataSet1.scatterShapeHoleColor = .orange |
设置散点中心大小 | chartDataSet1.scatterShapeHoleRadius = 2.5 |
设置散点样式 | chartDataSet1.setScatterShape(.circle) |
四:RadarChart(雷达图)
1.基本创建:
import UIKit
import Charts
class SevenVC: UIViewController{
var chartView: RadarChartView!
let labels = ["Speed", "Max Velocity", "Luxury", "Cash", "Comfotable", "Look"]
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
chartView = RadarChartView()
chartView.frame = CGRect(x: 10, y: 80, width: self.view.bounds.width - 20,
height: 260)
self.view.addSubview(chartView)
let yAxis = chartView.yAxis
yAxis.axisMinimum = 0
yAxis.axisMaximum = 100
yAxis.labelCount = 4
yAxis.drawLabelsEnabled = false
chartView.xAxis.valueFormatter = self
let dataEntries = (0..<6).map { (i) -> RadarChartDataEntry in
return RadarChartDataEntry(value: Double(arc4random_uniform(50) + 50))
}
let chartDataSet = RadarChartDataSet(entries: dataEntries, label: "Mercedes-Benz E63 AMG")
let chartData = RadarChartData(dataSets: [chartDataSet])
chartView.data = chartData
chartView.backgroundColor = .white
}
}
extension SevenVC: AxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
return labels[Int(value) % activities.count]
}
}
图示:
2. 数据源说明:
RadarChartDataEntry
:对应每个x轴与y轴构成的一个数据。例如E63的第一个数据值为89.0,那么上面的数据条目为RadarChartDataEntry(values; 89)
[RadarChartDataEntry]()
: 存放数据条目的泛型集合RadarChartDataSet
:许多条数据条目构成一组数据集,可未多组RadarChartData
:Chart组件的数据源。可为多组
3.基本属性:
作用 | 语句 |
---|---|
设置线条颜色 | chartDataSet.setColor(.orange) |
设置线条粗细 | chartDataSet.lineWidth = 2 |
设置填充颜色 | chartDataSet.fillColor = .orange |
设置填充透明度 | chartDataSet.fillAlpha = 0.4 |
启用填充色绘制 | chartDataSet.drawFilledEnabled = true |
设置网格主干线粗细 | chartView.webLineWidth = 2 |
设置网格主干线颜色 | chartView.webColor = .red |
设置网格线透明度 | chartView.webAlpha = 1 |
设置网格边线粗细 | chartView.innerWebLineWidth = 1 |
设置网格边线颜色 | chartView.innerWebColor = .orange |
设置数值文字的样式 | chartData.setValueFont(.systemFont(ofSize: 8, weight: .light)) |
设置数值文字颜色 | chartData.setValueTextColor(.blue) |
设置选中后以点显示 | chartDataSet.drawHighlightCircleEnabled = true |
五:PieChart(饼状图)
1.基本创建:
import UIKit
import Charts
class SixVC: UIViewController {
var chartView: PieChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
//创建饼图组件对象
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)")
}
var dataEntries1 = [PieChartDataEntry]()
let entries1 = PieChartDataEntry(value: 26, label: "Mercedes")
let entries2 = PieChartDataEntry(value: 24, label: "BMW")
let entries3 = PieChartDataEntry(value: 23, label: "Audi")
let entries4 = PieChartDataEntry(value: 9, label: "Leuxs")
let entries5 = PieChartDataEntry(value: 26, label: "Others")
dataEntries1.append(entries1)
dataEntries1.append(entries2)
dataEntries1.append(entries3)
dataEntries1.append(entries4)
dataEntries1.append(entries5)
let chartDataSet = PieChartDataSet(entries: dataEntries1, label: "Luxury Car Marketplace in China")
chartDataSet.xValuePosition = .insideSlice
chartDataSet.yValuePosition = .outsideSlice
//设置颜色
chartDataSet.colors = ChartColorTemplates.vordiplom()
+ ChartColorTemplates.joyful()
+ ChartColorTemplates.colorful()
+ ChartColorTemplates.liberty()
+ ChartColorTemplates.pastel()
let chartData = PieChartData(dataSet: chartDataSet)
chartData.setValueTextColor(.black)
//设置饼状图数据
chartView.data = chartData
}
}
图示:
2. 数据源说明:
PieChartDataEntry
:对应每个饼状图构成的一个数据。例如BMW的市场份额为24,那么上面的数据条目为PieChartDataEntry(value: 24, label: "BMW")
[PieChartDataEntry]()
: 存放数据条目的泛型集合PieChartData
:Chart组件的数据源。可为多组
3.基本属性:
作用 | 语句 |
---|---|
禁用图表旋转功能 | chartView.rotationEnabled = false |
设置选中扇区的伸出长度 | chartDataSet.selectionShift = 5 |
设置饼图中央的标题文字 | chartView.centerText = “Luxury Car” |
设置扇区间隔 | chartDataSet.sliceSpace = 3 |
设置饼状图内字体样式 | chartData.setValueFont(.systemFont(ofSize: 11, weight: .light)) |
设置饼状图内字体颜色 | chartData.setValueTextColor(.red) |
禁用饼状图内数值显示 | chartDataSet.drawValuesEnabled = false |
设置饼状图内的内圆半径 | chartView.holeRadiusPercent = 0 |
设置饼状图内的内圆半径透明比列 | chartView.transparentCircleRadiusPercent = 0.25 |
设置以实心形式展示 | chartView.drawHoleEnabled = false |
标签显示在内 | chartDataSet.xValuePosition = .insideSlice |
数值显示在外 | chartDataSet.yValuePosition = .outsideSlice |
设置文字颜色 | chartData.setValueTextColor(.black) |
设置扇形所占圆角度 | chartView.maxAngle = 270 |
设置扇形图旋转角度 | chartView.rotationAngle = 135 |
六:CandleStickChart(K线图)
这个组件是常被用作股票方面,可惜我对股票不太清楚,所以只画了一个。
1.基本创建:
import UIKit
import Charts
class FiveVC: UIViewController {
var chartView: CandleStickChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
chartView = CandleStickChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
var dataEntries = [CandleChartDataEntry]()
let entries1 = CandleChartDataEntry(x: 1, shadowH: 43, shadowL: 37, open: 40, close: 37)
let entries2 = CandleChartDataEntry(x: 2, shadowH: 43, shadowL: 47, open: 50, close: 47)
let entries3 = CandleChartDataEntry(x: 3, shadowH: 43, shadowL: 27, open: 30, close: 44)
let entries4 = CandleChartDataEntry(x: 4, shadowH: 43, shadowL: 17, open: 20, close: 22)
let entries5 = CandleChartDataEntry(x: 5, shadowH: 43, shadowL: 7, open: 10, close: 29)
dataEntries.append(entries1)
dataEntries.append(entries2)
dataEntries.append(entries3)
dataEntries.append(entries4)
dataEntries.append(entries5)
let chartDataSet1 = CandleChartDataSet(entries: dataEntries, label: "ST.00075")
let chartData = CandleChartData(dataSets: [chartDataSet1])
chartDataSet1.increasingColor = .red
chartDataSet1.decreasingColor = .green
chartView.data = chartData
}
}
图示:
七:BubbleChart(气泡图)
1.基本创建:
import UIKit
import Charts
class FourVC: UIViewController {
var chartView: BubbleChartView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
chartView = BubbleChartView()
chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
height: 260)
self.view.addSubview(chartView)
let dataEntries1 = (0..<10).map { (i) -> ChartDataEntry in
let val = Double(arc4random_uniform(100) + 3)
let size = CGFloat(arc4random_uniform(10))
return BubbleChartDataEntry(x: Double(i), y: val, size: size)
}
let chartDataSet1 = BubbleChartDataSet(entries: dataEntries1, label: "Audi")
var dataEntries2 = [BubbleChartDataEntry]()
let entry1 = BubbleChartDataEntry(x: Double(1), y: Double(10), size: 1)
let entry2 = BubbleChartDataEntry(x: Double(2), y: Double(20), size: 2)
let entry3 = BubbleChartDataEntry(x: Double(3), y: Double(30), size: 3)
let entry4 = BubbleChartDataEntry(x: Double(4), y: Double(45), size: 4.5)
let entry5 = BubbleChartDataEntry(x: Double(5), y: Double(45), size: 4.5)
let entry6 = BubbleChartDataEntry(x: Double(6), y: Double(45), size: 4.5)
let entry7 = BubbleChartDataEntry(x: Double(7), y: Double(55), size: 5.5)
let entry8 = BubbleChartDataEntry(x: Double(8), y: Double(65), size: 6.5)
let entry9 = BubbleChartDataEntry(x: Double(9), y: Double(35), size: 3.5)
let entry10 = BubbleChartDataEntry(x: Double(10), y: Double(25), size: 2.5)
dataEntries2.append(entry1)
dataEntries2.append(entry2)
dataEntries2.append(entry3)
dataEntries2.append(entry4)
dataEntries2.append(entry5)
dataEntries2.append(entry6)
dataEntries2.append(entry7)
dataEntries2.append(entry8)
dataEntries2.append(entry9)
dataEntries2.append(entry10)
let chartDataSet2 = BubbleChartDataSet(entries: dataEntries2, label: "BMW")
chartDataSet2.setColor(.orange)
let chartData = BubbleChartData(dataSets: [chartDataSet1, chartDataSet2])
chartView.data = chartData
}
}
图示:
2. 数据源说明:
BubbleChartDataEntry
:对应每个x轴与y轴构成的一个数据。例如BMW的第二个数据值为2.0,气泡大小为2,那么上面的数据条目为BubbleChartDataEntry(x: Double(2), y: Double(20), size: 2)
[BubbleChartDataEntry]()
: 存放数据条目的泛型集合BubbleChartDataSet
:许多条数据条目构成一组数据集,可未多组BubbleChartData
:Chart组件的数据源。可为多组
3.基本属性:
作用 | 语句 |
---|---|
设置某组颜色 | chartDataSet2.setColor(.orange) |
组件背景颜色 | chartView.backgroundColor = .yellow |
无数据时提示文本 | chartView.noDataText = “暂无数据” |
取消Y轴缩放 | chartView.scaleYEnabled = false |
启用双击缩放 | chartView.doubleTapToZoomEnabled = true |
启用拖动手势 | chartView.dragEnabled = true |
拖拽后是否有惯性效果 | chartView.dragDecelerationEnabled = true |
拖拽摩擦系数 | chartView.dragDecelerationFrictionCoef = 0.9 |
绘制图形区域背景 | chartView.drawGridBackgroundEnabled = true |
绘制图形区域边框 | chartView.drawBordersEnabled = true |
图形区域背景颜色 | chartView.gridBackgroundColor = .yellow |
边框颜色 | chartView.borderColor = .blue |
边框大小 | chartView.borderLineWidth = 3 |
图例文字颜色 | chartView.legend.textColor = UIColor.purple |
图例文字大小 | chartView.legend.formSize = 5 |
图例头部样式 | chartView.legend.form = .line |
设置线条颜色 | chartDataSet.colors = [.orange] |
修改线条大小 | chartDataSet.lineWidth = 2 |
设置线条颜色为交替显示 | chartDataSet.colors = [.orange, .red] |
开启填充色绘制 | chartDataSet.drawFilledEnabled = true |
设置填充色 | chartDataSet.fillColor = .orange |
设置填充色透明度 | chartDataSet.fillAlpha = 0.5 |
只显示横向十字线 | chartDataSet.drawVerticalHighlightIndicatorEnabled = false |
只显示纵向十字线 | chartDataSet.drawHorizontalHighlightIndicatorEnabled = false |
不启用十字线 | chartDataSet.highlightEnabled = false |
设置 x 轴位置 | chartView.xAxis.labelPosition = .bottom |
设置 x 轴的颜色 | chartView.xAxis.axisLineColor = .orange |
设置 x 轴的宽度 | chartView.xAxis.axisLineWidth = 2 |
指定最小刻度值 | chartView.xAxis.axisMinimum = -15 |
指定最大刻度值 | chartView.xAxis.axisMaximum = 15 |
设置刻度文字颜色 | chartView.xAxis.labelTextColor = .orange |
设置刻度文字大小 | chartView.xAxis.labelFont = .systemFont(ofSize: 14) |
设置刻度文字倾斜角度 | chartView.xAxis.labelRotationAngle = -30 |
是否启用网格线 | chartView.xAxis.drawGridLinesEnabled = false |
自定义刻度标签文字 | let xValues = [“一月”,“二月”,“三月”,“四月”,“五月”,“六月”,“七月”,“八月”,“九月”,“十月”] chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues |
是否显示右侧 Y 轴的刻度文字 | chartView.rightAxis.drawLabelsEnabled = false |
是否显示右侧y轴 | chartView.rightAxis.enabled = false |
值反向排列 | chartView.leftAxis.inverted = true |
绘制0刻度线 | chartView.leftAxis.drawZeroLineEnabled = true |
添加限制线(可显示多个) | let limitLine = ChartLimitLine(limit: 85, label: “优秀”) chartView.leftAxis.addLimitLine(limitLine) |
设置限制线在图层中的显示 | chartView.leftAxis.drawLimitLinesBehindDataEnabled = true |
修改限制线文字位置 | limitLine.labelPosition = .leftTop |
是否显示限制线文字 | limitLine.drawLabelEnabled = false |
设置图标在界面上一次最多显示数据条目 | chartView.setVisibleXRangeMaximum(10) |
设置x轴方向动画 | chartView.animate(xAxisDuration: 1) |
设置y轴方向动画 | chartView.animate(yAxisDuration: 1) |
设置x、y轴一起显示动画 | chartView.animate(xAxisDuration: 1, yAxisDuration: 1) |
设置动画效果 | chartView.animate(yAxisDuration: 1, easingOption: .easeOutCubic) |
获得当前图片显示的图片内容 | let image = chartView.getChartImage(transparent: true) |
参考资料:[1] 航歌.Swift - 第三方图表库Charts使用详解2(折线图1:整体样式设置).2018-07-20