Swift - 第三方图表库AAInfographics使用详解2（ 整体样式设置）
作者：hangge | 2019-02-06 08:10
三、整体样式设置
1，标题文字和颜色
下面分别修改设置主标题、副标题的文字和颜色。
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(.column) //图表类型
.title("城市天气变化") //图表主标题
.subtitle("2020年09月18日") //图表副标题
.titleColor("#0000FF") //图表主标题文字颜色
.subtitleColor("#FF0000") //图表副标题文字颜色
.categories(["一月", "二月", "三月", "四月"])
.series([
AASeriesElement()
.name("东京")
.data([7.0, 6.9, 9.5, 14.5])
.toDic()!,
AASeriesElement()
.name("纽约")
.data([0.2, 0.8, 5.7, 11.3])
.toDic()!])
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
2，数值标签的字体大小和颜色
通过 AASeriesElement 的 dataLabels 属性可以单独设置每个系列的数值标签样式。
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(.column) //图表类型
.title("城市天气变化") //图表主标题
.subtitle("2020年09月18日") //图表副标题
.titleColor("#0000FF") //图表主标题文字颜色
.subtitleColor("#FF0000") //图表副标题文字颜色
.categories(["一月", "二月", "三月", "四月"])
.series([
AASeriesElement()
.name("东京")
.data([7.0, 6.9, 9.5, 14.5])
.dataLabels(["enabled":true,"style":["color":"#0000FF","fontSize":"16px"]])
.toDic()!,
AASeriesElement()
.name("纽约")
.data([0.2, 0.8, 5.7, 11.3])
.toDic()!])
// 图表视图对象调用图表模型对象,绘制最终图形
aaChartView.aa_drawChartWithChartModel(chartModel)
}
}
3，是否显示数值标签
下面不显示柱子上方的数字标签。
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.column) //图表类型
.title("城市天气变化") //图表主标题
.dataLabelEnabled(false) //不显示数值
.categories(["一月", "二月", "三月", "四月"])
//.....
4，设置图表背景色和边距
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.column) //图表类型
.title("城市天气变化") //图表主标题
.backgroundColor("#FFFF00") //图表背景色
.marginLeft(60) //图表左边距
.marginRight(30) //图表右边距
.marginBottom(100) //图表底部边距
.categories(["一月", "二月", "三月", "四月"])
//.....
5，x 轴、y 轴相关样式设置
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.column) //图表类型
.title("城市天气变化") //图表主标题
.xAxisReversed(false) //x轴是否翻转：否
.yAxisReversed(false) //y轴是否翻转：否
.xAxisVisible(true) //x轴是否显示：是
.yAxisVisible(true) //y轴是否显示：是
.xAxisLabelsEnabled(true) //x轴是否显示数据：是
.yAxisLabelsEnabled(true) //y轴是否显示数据：是
.xAxisGridLineWidth(3) //x轴网格线的宽度
.yAxisGridLineWidth(6) //y轴网格线的宽度
.yAxisTitle("摄氏度") //y轴标题
.axisColor("#0000FF") //x轴和y轴文字颜色
//.....
6，图例相关样式设置
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.column) //图表类型
.title("城市天气变化") //图表主标题
.legendEnabled(true) //显示图例
.legendLayout(.horizontal) //图例使用水平布局（vertical为垂直布局）
.legendVerticalAlign(.bottom) //图例在图表区中的垂直对齐方式：top，middle 和 bottom
.legendAlign(.right) //图例在图表区中的水平对齐方式：left，center 和 right
//.....
7，开启手势缩放
（1）默认情况下图表的手势缩放功能是关闭的，我们可以使用 zoomType 方法来开启，该方法可选项如下：
- .none：关闭手势缩放
- .x：可沿着 x 轴进行手势缩放
- .y：可沿着 y 轴进行手势缩放
- .xy：可沿着 x 轴、y 轴进行手势缩放
（2）下面是开启沿着 x 轴进行手势缩放的效果：
- 使用两指手势可以放大、缩小图表，或者拖动图表的显示区域。
- 同时放大后图表上还会出现个重置按钮，点击即可恢复成原来尺寸。
// 初始化图表模型
let chartModel = AAChartModel()
.chartType(.column) //图表类型
.title("城市天气变化") //图表主标题
.zoomType(.x) //可沿着 x 轴进行手势缩放
//.....
全部评论（0）