Swift - 第三方图表库AAInfographics使用详解4(折线图、曲线图、直方折线图)
一、折线图
1,基本用法
(1)下面我们使用 AAInfographics 来显示一个简单的折线图,效果如下:
- 整个折线图一共展示三组数据(三个系列数据),每组数据使用不同的颜色和图例区分。
- 图表展示时会有动画效果,默认效果是从左往右逐渐绘制出来。
- 点击某个分类刻度时,会出现浮动提示框显示相关数据。
- 点击某个图例可以隐藏、显示该图例对应系列的数据。


import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // 初始化图表视图控件 let chartWidth = self.view.frame.size.width let chartHeight = self.view.frame.size.height - 200 let aaChartView = AAChartView() aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight) self.view.addSubview(aaChartView) // 初始化图表模型 let chartModel = AAChartModel() .chartType(.line)//图表类型 .title("城市天气变化")//图表主标题 .subtitle("2020年09月18日")//图表副标题 .inverted(false)//是否翻转图形 .yAxisTitle("摄氏度")// Y 轴标题 .legendEnabled(true)//是否启用图表的图例(图表底部的可点击的小圆点) .tooltipValueSuffix("摄氏度")//浮动提示框单位后缀 .categories(["一月", "二月", "三月", "四月", "五月", "六月"]) .colorsTheme(["#fe117c","#ffc069","#06caf4"])//主题颜色数组 .series([ AASeriesElement() .name("东京") .data([7.0, 6.9, 9.5, 14.5, 18.2, 21.5]) .toDic()!, AASeriesElement() .name("纽约") .data([0.2, 0.8, 5.7, 11.3, 17.0, 25.0]) .toDic()!, AASeriesElement() .name("柏林") .data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0]) .toDic()!]) // 图表视图对象调用图表模型对象,绘制最终图形 aaChartView.aa_drawChartWithChartModel(chartModel) } }
2,修改连接点的样式类型
(1)折线连接点有如下 5 中样式可以选择,如果不指定的话则每组数据依次轮流使用这几种样式。
- circle:圆形
- square:正方形
- diamond:菱形
- triangle:上三角形
- triangle-down:下三角形
(2)下面将所有连接点统一使用三角形:

let chartModel = AAChartModel() .chartType(.line)//图表类型 .symbol(.triangle)//使用三角类型的连接点 //.....
3,修改连接点的空心样式
(1)使用 symbolStyle 可以设置连接点的空心样式,有如下三种可选值:
- none:内部和边框均为实心(默认值)
- borderBlank:边框空心
- innerBlank:内部空心
(2)下面分别是 borderBlank 和 innerBlank 的效果:


let chartModel = AAChartModel() .chartType(.line)//图表类型 .symbol(.triangle)//使用三角类型的连接点 .symbolStyle(.borderBlank) //连接点边框空心 //.....
4,修改折线连接点半径
(1)markerRadius 可以设置连接点半径:

let chartModel = AAChartModel() .chartType(.line)//图表类型 .markerRadius(10) //折线连接点半径 //.....
(2)如果将 markerRadius 设置为 0,则不显示连接点:

let chartModel = AAChartModel() .chartType(.line)//图表类型 .markerRadius(0) //连接点半径为0则不显示连接点 //.....
5,x 轴是否翻转
下面将水平和垂直坐标进行翻转。

let chartModel = AAChartModel() .chartType(.line)//图表类型 .inverted(true)//翻转图形 //.....
6,极化图形(变为雷达图)

let chartModel = AAChartModel() .chartType(.line)//图表类型 .polar(true) //极化图形(变为雷达图) //.....
7,修改线条样式
(1)折线除了可以使用实线外,我们还可以使用 dashStyle 将其改成虚线样式,有如下几种可选值:
- solid:实线(默认值)
- dash:虚线
- dot:点
- shortDot:密集点
- dashDot:虚线 + 点
- longDash:长虚线
- longDashDot:长虚线 + 点
- longDashDotDot:长虚线 + 点 + 点
- shortDash:短虚线
- shortDashDot:短虚线 + 点
- shortDashDotDot:短虚线 + 点 + 点
(2)下面是各种线条样式的效果:

let chartModel = AAChartModel() .chartType(.line)//图表类型 .title("线条样式比较")//图表主标题 .stacking(.normal) .series([ AASeriesElement() .name("SolidLine") .lineWidth(3) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.dash.rawValue) .lineWidth(3) .dashStyle(.dash) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.dot.rawValue) .lineWidth(3) .dashStyle(.dot) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.shortDot.rawValue) .lineWidth(3) .dashStyle(.shortDot) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.dashDot.rawValue) .lineWidth(3) .dashStyle(.dashDot) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.longDash.rawValue) .lineWidth(3) .dashStyle(.longDash) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.longDashDot.rawValue) .lineWidth(3) .dashStyle(.longDashDot) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.longDashDotDot.rawValue) .lineWidth(3) .dashStyle(.longDashDotDot) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.shortDash.rawValue) .lineWidth(3) .dashStyle(.shortDash) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.shortDashDot.rawValue) .lineWidth(3) .dashStyle(.shortDashDot) .data([50, 320, 230, 370, 230]) .toDic()!, AASeriesElement() .name(AALineDashSyleType.shortDashDotDot.rawValue) .lineWidth(3) .dashStyle(.shortDashDotDot) .data([50, 320, 230, 370, 230]) .toDic()! ])
二、曲线图
(1)将图表类型设置为 spline 即为曲线图,这时各个连接点之前的连线则变成平滑的曲线。

let chartModel = AAChartModel() .chartType(.spline)//图表类型为曲线图 .markerRadius(0) //连接点半径为0则不显示连接点 //.....
(2)曲线图的其它样式属性和折线图一样,这里就不再重复介绍了。
三、直方折线图
(1)将 AASeriesElement 的 step 设置为 true 即可将普通折线变成直方折线。

import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // 初始化图表视图控件 let chartWidth = self.view.frame.size.width let chartHeight = self.view.frame.size.height - 200 let aaChartView = AAChartView() aaChartView.frame = CGRect(x:0, y:0, width:chartWidth, height:chartHeight) self.view.addSubview(aaChartView) // 初始化图表模型 let chartModel = AAChartModel() .chartType(.line)//图表类型 .title("城市天气变化")//图表主标题 .subtitle("2020年09月18日")//图表副标题 .inverted(false)//是否翻转图形 .yAxisTitle("摄氏度")// Y 轴标题 .legendEnabled(true)//是否启用图表的图例(图表底部的可点击的小圆点) .tooltipValueSuffix("摄氏度")//浮动提示框单位后缀 .categories(["一月", "二月", "三月", "四月", "五月", "六月"]) .colorsTheme(["#fe117c","#ffc069","#06caf4"])//主题颜色数组 .series([ AASeriesElement() .name("东京") .step(true) .data([7.0, 6.9, 9.5, 14.5, 18.2, 10]) .toDic()!]) // 图表视图对象调用图表模型对象,绘制最终图形 aaChartView.aa_drawChartWithChartModel(chartModel) } }
(2)默认情况下直方折线的折线连接点位置是靠左,将 step 设置为 right 则折线连接点位置靠右。

AASeriesElement() .name("东京") .step("right") .data([7.0, 6.9, 9.5, 14.5, 18.2, 10]) .toDic()!
(3)将 step 设置为 center 则折线连接点位置居中。

AASeriesElement() .name("东京") .step("center") .data([7.0, 6.9, 9.5, 14.5, 18.2, 10]) .toDic()!
(4)直方折线图的其它样式属性和普通折线图一样,这里就不再重复介绍了。