当前位置: > > > Swift - 第三方图表库AAInfographics使用详解5(面积图、填充图、直方折线填充图)

Swift - 第三方图表库AAInfographics使用详解5(面积图、填充图、直方折线填充图)

一、折线填充图

1,基本用法

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

(2)样例代码
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(.area)//图表类型
            .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(.area)//图表类型
    .symbol(.triangle)//使用三角类型的连接点
    //....

3,修改连接点的空心样式

(1)使用 symbolStyle 可以设置连接点的空心样式,有如下三种可选值:
  • none:内部和边框均为实心(默认值)
  • borderBlank:边框空心
  • innerBlank:内部空心

(2)下面分别是 borderBlankinnerBlank 的效果:
         
let chartModel = AAChartModel()
    .chartType(.area)//图表类型
    .symbol(.triangle)//使用三角类型的连接点
    .symbolStyle(.borderBlank) //连接点边框空心
    //....

4,修改折线连接点半径

(1)markerRadius 可以设置连接点半径:
let chartModel = AAChartModel()
    .chartType(.area)//图表类型
    .markerRadius(10) //折线连接点半径
    //....

(2)如果将 markerRadius 设置为 0,则不显示连接点:

let chartModel = AAChartModel()
    .chartType(.area)//图表类型
    .markerRadius(0) //连接点半径为0则不显示连接点
    //....

5,x 轴是否翻转

下面将水平和垂直坐标进行翻转。
let chartModel = AAChartModel()
    .chartType(.area)//图表类型
    .inverted(true)//翻转图形
    //....

6,极化图形(变为雷达图)

let chartModel = AAChartModel()
    .chartType(.line)//图表类型
    .polar(true) //极化图形(变为雷达图)
    //.....

7,堆积样式

(1)默认情况下数据是不会堆叠的,下面样例使用堆叠方式显示图表数据。
let chartModel = AAChartModel()
    .chartType(.area)//图表类型
    .stacking(.normal) //普通堆叠
    //....

(2)下面是改成百分比堆叠的样式:
let chartModel = AAChartModel()
    .chartType(.area)//图表类型
    .stacking(.percent) //百分比堆叠
    //....

8,修改线条样式

(1)折线除了可以使用实线外,我们还可以使用 dashStyle 将其改成虚线样式,有如下几种可选值:
  • solid:实线(默认值)
  • dash:虚线
  • dot:点
  • shortDot:密集点
  • dashDot:虚线 + 点
  • longDash:长虚线
  • longDashDot:长虚线 + 点
  • longDashDotDot:长虚线 + 点 + 点
  • shortDash:短虚线
  • shortDashDot:短虚线 + 点
  • shortDashDotDot:短虚线 + 点 + 点

(2)下面是各种线条样式的效果:
let chartModel = AAChartModel()
.chartType(.area)//图表类型
.title("线条样式比较")//图表主标题
.dataLabelEnabled(false) //不显示数值
.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)将图表类型设置为 areaspline 即为曲线填充图,这时各个连接点之前的连线则变成平滑的曲线。
let chartModel = AAChartModel()
    .chartType(.areaspline)//图表类型为曲线填充图
    .markerRadius(0) //连接点半径为0则不显示连接点
    //.....

(2)曲线填充图的其它样式属性和折线填充图一样,这里就不再重复介绍了。

三、直方折线填充图

(1)将 AASeriesElementstep 设置为 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(.area)//图表类型
            .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)直方折线填充图的其它样式属性和普通折线填充图一样,这里就不再重复介绍了。
评论0