返回 导航

Swift

hangge.com

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

作者：hangge | 2019-02-15 08:39

一、折线填充图

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）下面分别是 borderBlank 和 innerBlank 的效果：
          
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）将 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(.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）

回到顶部