AAChartKit-Swift 極其精美的iOS開源圖表庫現更有Swift版本可用

時間 2019-11-06

標籤 aachartkit swift 極其精美 ios 開源圖表版本可用欄目 Swift 简体版

原文原文鏈接

AAInfographics(AAChartKit-Swift)

----- 一款極其精美的開源圖表庫AAChartKit現更有Swift版本可用

您所喜好的`AAInfographics`開源圖表庫同時更有`Objective-C`版本可供使用,詳情請點擊如下連接

傳送門

https://github.com/AAChartMod...

前言

AAInfographics,是 AAChartKit 的 swift語言版本,是在流行的開源前端圖表庫Highcharts的基礎上,封裝的面向對象的,一組簡單易用,極其精美的圖表繪製控件.html

功能特性

適配 iOS 6 +, 支持ARC,支持 swift 3.0及以上語言,配置簡單.
功能強大,支持柱狀圖 、條形圖 、折線圖 、曲線圖 、折線填充圖 、曲線填充圖、雷達圖、極地圖、扇形圖、氣泡圖、散點圖、區域範圍圖、柱形範圍圖、面積範圍圖、面積範圍均線圖、直方折線圖、直方折線填充圖、箱線圖、瀑布圖、熱力圖、桑基圖、金字塔圖、漏斗圖、等十幾種類型的圖形,不可謂之很少.
動畫效果細膩精緻,流暢優美.有三十多種以上圖形渲染動畫效果可供選擇,用戶可自由設置渲染圖形時的動畫時間和動畫類型,關於圖形渲染動畫類型,具體參見 AAInfographics 動畫類型.
AAChartView +AAChartModel = Chart,在 AAInfographics 封裝庫當中,遵循這樣一個極簡主義公式:圖表視圖控件+圖表模型=你想要的圖表. 同另外一個好用的 iOS 開源圖表庫 AAChartKit 徹底一致.
類 Masonry 鏈式編程語法, 一行代碼便可配置完成 AAChartModel 模型對象實例.
簡潔清晰,輕便易用. 最少僅僅須要 五行代碼 便可完成整個圖表的繪製工做(使用鏈式編程語法配置 AAChartModel 實例對象時,不管你寫多少行代碼,理論上只能算做是一行)(???)

真機美圖

Column Chart 柱狀圖	Columnrange Chart 條形範圍圖	Area Chart 區域填充圖

Line Chart 多組數據折線圖	Step Area Chart 直方折線填充圖	Step Line Chart 直方折線圖

使用方法

準備工做

將項目demo中的文件夾AAInfographics拖入到所需項目中.

正式開始

在你的視圖控制器文件中添加

import AAChartView.swift

建立視圖AAChartView

CGFloat chartViewWidth  = self.view.frame.size.width;
        CGFloat chartViewHeight = self.view.frame.size.height;
        aaChartView = AAChartView()
        aaChartView?.frame = CGRect(x:0,y:0,width:chartViewWidth,height:chartViewHeight)
        // 設置 aaChartView 的內容高度(content height)
        // aaChartView?.contentHeight = self.view.frame.size.height
        self.view.addSubview(aaChartView!)

配置視圖模型AAChartModel

鏈式編程的方式配置 AAChartModel 模型對象屬性

let chartModel = AAChartModel.init()
            .chartType(AAChartType.Column)//圖表類型
            .title("城市天氣變化")//圖表主標題
            .subtitle("2020年09月18日")//圖表副標題
            .inverted(false)//是否翻轉圖形
            .yAxisTitle("攝氏度")// Y 軸標題
            .legendEnabled(true)//是否啓用圖表的圖例(圖表底部的可點擊的小圓點)
            .tooltipValueSuffix("攝氏度")//浮動提示框單位後綴
            .categories(["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
            .colorsTheme(["#fe117c","#ffc069","#06caf4","#7dffc0"])//主題顏色數組
            .series([
                [
                    "name": "東京",
                    "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                ], [
                    "name": "紐約",
                    "data": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                ], [
                    "name": "柏林",
                    "data": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                ], [
                    "name": "倫敦",
                    "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                ]])

繪製圖形(建立 AAChartView 實例對象後,首次繪製圖形調用此方法)

/*圖表視圖對象調用圖表模型對象,繪製最終圖形*/
    chartView?.aa_drawChartWithChartModel(chartModel)

僅僅刷新圖形的series數據內容(首次繪製圖形完成以後,後續刷新圖表數據均建議調用此方法)

/*僅僅更新了圖表的series數組數據,不改動圖表的其餘內容*/
    chartView?.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)

刷新圖形總體內容

/*更新 AAChartModel 總體內容(如修改了圖表的類型,將 column chart 改成 area chart)以後,刷新圖表*/
    chartView?.aa_refreshChartWholeContentWithChartModel(chartModel)

AAChartModel一些重要屬性通過配置以後的圖形示例以下

line chart - 折線圖

column chart - 柱形圖

bar chart - 條形圖

special area chart one - 常規折線區域填充圖

special area chart two - 帶有負數的區域填充圖

special area chart three - 堆積效果的區域填充圖

polar chart - 極地圖

radar chart - 雷達圖

pie chart - 扇形圖

bubble chart - 氣泡圖

scatter chart - 散點圖

arearange chart - 區域範圍圖

step area chart - 直方折線填充圖

mixed chart - 混合圖形

特別說明

特殊類型圖表配置

AAInfographics 中扇形圖、氣泡圖都歸屬爲特殊類型,因此想要繪製扇形圖、氣泡圖,圖表模型 AAChartModel 的數據屬性series設置稍有不一樣,示例以下前端

繪製扇形圖,你須要這樣配置模型對象 AAChartModel

aaChartModel = AAChartModel.init()
                .chartType(AAChartType.Pie)
                .title("LANGUAGE MARKET SHARES JANUARY,2020 TO MAY")
                .subtitle("virtual data")
                .dataLabelEnabled(false)//是否直接顯示扇形圖數據
                .yAxisTitle("℃")
                .series(
                    [
                        [
                            "name": "Language market shares",
                            "innerSize":"50%",
                            "data": [
                                ["Java"  ,67],
                                ["Swift" ,44],
                                ["Python",83],
                                ["OC"    ,11],
                                ["Ruby"  ,42],
                                ["PHP"   ,31],
                                ["Go"    ,63],
                                ["C"     ,24],
                                ["C#"    ,888],
                                ["C++"   ,66],
                            ]
                        ],
                        ]

繪製氣泡圖,你須要這樣配置模型對象 AAChartModel

aaChartModel = AAChartModel.init()
                .chartType(AAChartType.Bubble)
                .title("AACHARTKIT BUBBLES")
                .subtitle("JUST FOR FUN")
                .yAxisTitle("℃")
                .series(
                    [
                        [
                            "data": [[97, 36, 79],
                                     [94, 74, 60],
                                     [68, 76, 58],
                                     [64, 87, 56],
                                     [68, 27, 73],
                                     [74, 99, 42],
                                     [7,  93, 87],
                                     [51, 69, 40],
                                     [38, 23, 33],
                                     [57, 86, 31]]
                        ],
                        [
                            "data": [[25, 10, 87],
                                     [2,  75, 59],
                                     [11, 54, 8 ],
                                     [86, 55, 93],
                                     [5,  3,  58],
                                     [90, 63, 44],
                                     [91, 33, 17],
                                     [97, 3,  56],
                                     [15, 67, 48],
                                     [54, 25, 81]]
                        ],
                        [
                            "data": [[47, 47, 21],
                                     [20, 12, 4 ],
                                     [6,  76, 91],
                                     [38, 30, 60],
                                     [57, 98, 64],
                                     [61, 17, 80],
                                     [83, 60, 13],
                                     [67, 78, 75],
                                     [64, 12, 10],
                                     [30, 77, 82]]
                        ]
                    ]
            )

繪製柱形範圍圖,你須要這樣配置模型對象 AAChartModel

aaChartModel = AAChartModel.init()
                .chartType(AAChartType.Columnrange)
                .title("TEMPERATURE VARIATION BY MONTH")
                .subtitle("observed in Gotham city")
                .yAxisTitle("℃")
                .categories(["January", "February", "March", "April", "May", "June",
                             "July", "August", "September", "October", "November", "December"])
                .dataLabelEnabled(true)
                //.inverted(true)
                .series(
                    [
                        [
                            "name":"temperature",
                            "data":[
                                [-9.7,  9.4],
                                [-8.7,  6.5],
                                [-3.5,  9.4],
                                [-1.4, 19.9],
                                [0.0,  22.6],
                                [2.9,  29.5],
                                [9.2,  30.7],
                                [7.3,  26.5],
                                [4.4,  18.0],
                                [-3.1, 11.4],
                                [-5.2, 10.4],
                                [-13.5, 9.8]
                            ]]]
            )

NOTE: 關於更多類型特殊圖表的 AAChartModel實例對象屬性配置,詳情請見 AAInfographics 工程 Demo 中的SpecialChartVC.swift文件內容,查看文件內容詳情請點擊這裏,您也能夠選擇下載 Demo 後,在 Xcode 中查看 AAInfographics 的SpecialChartVC.swift內容java

當前已支持的圖表類型有十種以上,說明以下

enum AAChartType:String{
    case Column      = "column"      //柱形圖
    case Bar         = "bar"         //條形圖
    case Area        = "area"        //折線區域填充圖
    case AreaSpline  = "areaspline"  //曲線區域填充圖
    case Line        = "line"        //折線圖
    case Spline      = "spline"      //曲線圖
    case Scatter     = "scatter"     //散點圖
    case Pie         = "pie"         //扇形圖
    case Bubble      = "bubble"      //氣泡圖
    case Pyramid     = "pyramid"     //金字塔圖
    case Funnel      = "funnel"      //漏斗圖
    case Columnrange = "columnrange" //柱形範圍圖
    case Arearange   = "arearange"   //區域範圍圖

}

當前已支持的圖表渲染動畫類型有三十種以上,說明以下

enum AAChartAnimationType:String {
    case EaseInQuad     = "easeInQuad"
    case EaseOutQuad    = "easeOutQuad"
    case EaseInOutQuad  = "easeInOutQuad"
    case EaseInCubic    = "easeInCubic"
    case EaseOutCubic   = "easeOutCubic"
    case EaseInOutCubic = "easeInOutCubic"
    case EaseInQuart    = "easeInQuart"
    case EaseOutQuart   = "easeOutQuart"
    case EaseInOutQuart = "easeInOutQuart"
    case EaseInQuint    = "easeInQuint"
    case EaseOutQuint   = "easeOutQuint"
    case EaseInOutQuint = "easeInOutQuint"
    case EaseInSine     = "easeInSine"
    case EaseOutSine    = "easeOutSine"
    case EaseInOutSine  = "easeInOutSine"
    case EaseInExpo     = "easeInExpo"
    case EaseOutExpo    = "easeOutExpo"
    case EaseInOutExpo  = "easeInOutExpo"
    case EaseInCirc     = "easeInCirc"
    case EaseOutCirc    = "easeOutCirc"
    case EaseInOutCirc  = "easeInOutCirc"
    case EaseOutBounce  = "easeOutBounce"
    case EaseInBack     = "easeInBack"
    case EaseOutBack    = "easeOutBack"
    case EaseInOutBack  = "easeInOutBack"
    case Elastic        = "elastic"
    case SwingFromTo    = "swingFromTo"
    case SwingFrom      = "swingFrom"
    case SwingTo        = "swingTo"
    case Bounce         = "bounce"
    case BouncePast     = "bouncePast"
    case EaseFromTo     = "easeFromTo"
    case EaseFrom       = "easeFrom"
    case EaseTo         = "easeTo"
}

關於`AAChartModel` 屬性說明

AAChartModel 主要屬性說明

屬性名稱	屬性類型	描述	取值範圍
title	String	圖表主標題	任意有效的字符串
subtitle	String	圖表副標題	任意有效的字符串
chartType	AAChartType	圖表類型,能夠爲`AAChartType`枚舉字符串當中指定的任意有效類型.其中有支持`柱狀圖` 、`條形圖` 、`折線圖` 、`曲線圖` 、`折線填充圖` 、`曲線填充圖`、`雷達圖`、`扇形圖`、`氣泡圖`、`散點圖`、`金字塔圖`、`漏斗圖`、`區域範圍圖`、`柱形範圍圖`等多種圖形	AAChartType.Column, AAChartType.Bar, AAChartType.Area, AAChartType.AreaSpline, AAChartType.Line, AAChartType.Spline, AAChartType.Pie, AAChartType.Bubble, AAChartType.Scatter, AAChartType.Pyramid, AAChartType.Funnel, AAChartType.Arearange, AAChartType.Columnrange
stacking	AAChartStackingType	是否將圖表每一個數據列的值疊加在一塊兒。默認的值爲`AAChartStackingType.False`，即禁用堆疊樣式效果.另有常規堆疊樣式和百分比堆疊樣式可供選擇	AAChartStackingType.False, AAChartStackingType.Normal, AAChartStackingType.Percent
symbol	AAChartSymbolType	預約義的圖表曲線鏈接點的樣式類型.其可供選擇的值有`圓`、`正方形`、`鑽石`、`常規三角形`和`倒三角形`,默認爲混合樣式	AAChartSymbolType.Circle, AAChartSymbolType.Square, AAChartSymbolType.Diamond, AAChartSymbolType.Triangle, AAChartSymbolType.Triangle_down

AAChartModel 全部屬性列表說明

public var animationType:String?       //動畫類型
public var title:String?               //標題內容
public var subtitle:String?            //副標題內容
public var chartType:String?           //圖表類型
public var stacking:String?            //堆積樣式
public var symbol:String?              //折線曲線鏈接點的類型："circle", "square", "diamond", "triangle","triangle-down"，默認是"circle"
public var zoomType:String?            //縮放類型 AAChartZoomTypeX表示可沿着 x 軸進行手勢縮放
public var inverted:Bool?              //x 軸是否垂直
public var xAxisReversed:Bool?         //x 軸翻轉
public var yAxisReversed:Bool?         //y 軸翻轉
public var crosshairs:Bool?            //是否顯示準星線(默認顯示)
public var gradientColorEnable:Bool?   //是否要爲漸變色
public var polar:Bool?                 //是否極化圖形(變爲雷達圖)
public var dataLabelEnabled:Bool?      //是否顯示數據
public var xAxisLabelsEnabled:Bool?    //x軸是否顯示數據
public var categories:Array<Any>?      //x軸是否顯示數據
public var xAxisGridLineWidth:Int?     //x軸網格線的寬度
public var yAxisLabelsEnabled:Bool?    //y軸是否顯示數據
public var yAxisTitle:String?          //y軸標題
public var yAxisGridLineWidth:Int?     //y軸網格線的寬度
public var colorsTheme:Array<Any>?     //圖表主題顏色數組
public var series:Array<Any>?          //圖表的主題數據列數組
public var legendEnabled:Bool?         //是否顯示圖例
public var legendLayout:String?        //圖例數據項的佈局。佈局類型： "horizontal" 或 "vertical" 即水平佈局和垂直佈局 默認是：horizontal.
public var legendAlign:String?         //設定圖例在圖表區中的水平對齊方式，合法值有 left，center 和 right。
public var legendVerticalAlign:String? //設定圖例在圖表區中的垂直對齊方式，合法值有 top，middle 和 bottom。垂直位置能夠經過 y 選項作進一步設定
public var backgroundColor:String?     //圖表背景色
public var options3dEnable:Bool?       //是否3D化圖形(僅對條形圖,柱狀圖有效)
public var options3dAlpha:Int?
public var  options3dBeta:Int?
public var options3dDepth:Int?         //3D圖形深度
public var borderRadius:Int?           //柱狀圖長條圖頭部圓角半徑(可用於設置頭部的形狀,僅對條形圖,柱狀圖有效)
public var markerRadius:Int?           //折線鏈接點的半徑長度

附言

在 AAInfographics 封裝庫的初始設計中,爲提高.js文件的加載速度,故將所依賴的.js文件放置在本地.然而因爲本項目功能較多,故放置於本地的附加JavaScript文件庫體積較大,整個AAJSFiles文件夾下全部的.js文件體積合計共有5.3M左右(固然在工程打包壓縮以後實際大小遠小於此),若對工程文件體積大小較爲敏感的使用者,可以使用如下建議的替代方案jquery

刪除在本AAInfographics項目文件中,AAJSFiles文件夾下的5項.js文件.須要被刪除的文件名稱以下

AAJQueryLibrary.js
AAHighchartsLibrary.js
AAHighchartsMore.js
AAHighcharts-3d.js
AAFunnel.js

將AAChartView.html文件中的如下內容

<script src="AAJQueryLibrary.js">
</script>
<script src="AAHighchartsLibrary.js">
</script>
<script src="AAHighchartsMore.js">
</script>
<script src="AAHighcharts-3d.js">
</script>
<script src="AAFunnel.js">
</script>

替換爲ios

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js">
</script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js">
</script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js">
</script>

便可.git

此方案是將本來加載放置在本地的.js依賴文件改成了加載放置在網絡上的.js文件,減少了本地文件大小,但有可能會有必定的網絡延遲(0.5s之內),因此建議AAInfographics用戶可根據本身的實際項目的開發須要,酌情選擇最終是否使用本替代方案.github

做者

An An編程

_oo0oo_
                      o8888888o
                      88" . "88
                      (| -_- |)
                      0\  =  /0
                    ___/`---'\___
                  .' \\|     |// '.
                 / \\|||  :  |||// \
                / _||||| -:- |||||- \
               |   | \\\  -  /// |   |
               | \_|  ''\---/''  |_/ |
               \  .-\__  '-'  ___/-. /
             ___'. .'  /--.--\  `. .'___
          ."" '<  `.___\_<|>_/___.' >' "".
         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
         \  \ `_.   \_ __\ /__ _/   .-` /  /
     =====`-.____`.___ \_____/___.-`___.-'=====
                       `=---='
*******************************************************
     ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥
         €€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€
               $$$$$$$$$$$$$$$$$$$$$$$  
                   BUDDHA_BLESS_YOU       
                      AWAY_FROM
                         BUG