標籤：

iOS或Android開發中有哪些庫或工具可以幫助實現數據可視化？

01-01

從基本的圖標到類似Axiis生成的圖表均可

可能題主問的就是生成圖表的庫吧，那推薦如下的。

Android：AChartEngine

iOS: PNChart （有OC版和Swift版）

我沒有開發過需要圖表的app所以不太熟，不過看過Demo知道它們比較好用。

手機編輯的答案不好附鏈接，搜一下名字很容易找到的～

https://github.com/Trinea/android-open-project#十四graphview

@Trinea 哈哈哈

效果圖：

授你以漁:

GitHub搜索android/ios chart，然後按star排名應該就能找到你要的…

最近剛好也在找這方面的資料，順便做下記錄，截圖就不放了。

以下是Android：

開源:

1. Holo Graph Library: danielnadeau / HoloGraphLibrary / wiki / Home

2. aChartEngine: http://www.achartengine.org/content/demo.html

3. ChartView: https://github.com/nadavfima/ChartView/

4. aFreeChart: http://code.google.com/p/afreechart/

5. ChartDroid: http://code.google.com/p/chartdroid/

6. charts4j: http://code.google.com/p/charts4j/

7. GraphView: http://android.arnodenhond.com/components/graphview

8. AndroidPlot: AndroidPlot

9. Drawing the 3D piechart Using Google chart Api: Drawing the 3D piechart Using Google chart Api

10. MPAndroidChart: https://github.com/PhilJay/MPAndroidChart

11. WilliamChart: https://github.com/diogobernardino/WilliamChart

12. HelloCharts: https://github.com/lecho/hellocharts-android

付費:

1. aiCharts: http://www.artfulbits.com/products/android/aiCharts.aspx

2. RChart: http://www.java4less.com/charts/chart.php?info=android

3. ShinobiControls: http://www.shinobicontrols.com/android/shinobicharts/product-tour/

4. Steema TeeChart: https://play.google.com/store/apps/details?id=com.steema.teechart.androidhl=en

5. Orson Charts: http://www.object-refinery.com/orsoncharts/android/index.html

6. Telerik Rad Chart: http://www.telerik.com/android-ui/chart

以下是iOS：

1. Core Plot :core-plot/core-plot

2. Shinobi Charts :shinobicharts: iOS Android Charts

3. KeepEdge :iPhone Chart Library

4. JBChartView :Jawbone/JBChartView · GitHub

5. SwiftCharts :i-schuetz/SwiftCharts · GitHub

AAChartKit

AAChartKit項目,是在流行的開源前端圖表庫Highcharts的基礎上,封裝的面向對象的,一組簡單易用,極其精美的圖表繪製控制項.

  1. 適配 iOS 7, 支持ARC,支持 OC語言,配置簡單.
  2. 功能強大,支持柱狀圖 條形圖 折線圖 填充圖 雷達圖 扇形圖 氣泡圖等多種圖形
  3. 動畫效果細膩精緻,流暢優美.
  4. 支持類 Masonry 鏈式編程語法
  5. AAChartView + AAChartModel = Chart,在 AAChartKit 封裝庫當中,遵循這樣一個極簡主義公式:圖表視圖控制項+圖表模型=你想要的圖表.
    傳送門
    https://github.com/AAChartModel/AAChartKit

使用方法

準備工作

  1. 將項目demo中的文件夾AAChartKitFiles拖入到所需項目中.
  2. 在你的項目的 .pch 全局宏定義文件中添加#import "AAGlobalMacro.h"

正式開始

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

#import "AAChartView.h"

2.創建視圖AAChartView

AAChartView *chartView = [[AAChartView alloc]init];
self.view.backgroundColor = [UIColor whiteColor];
chartView.frame = CGRectMake(0, 60, self.view.frame.size.width, self.view.frame.size.height-220);
chartView.contentHeight =self.view.frame.size.height-220;//設置圖表視圖的內容高度(默認 contentHeight 和 AAChartView 的高度相同)
[self.view addSubview:chartView];

3.配置視圖模型AAChartModel

AAChartModel *chartModel= AAObject(AAChartModel)
.chartTypeSet(AAChartTypeColumn)//設置圖表的類型(這裡以設置的為柱狀圖為例)
.titleSet(@"編程語言熱度")//設置圖表標題
.subtitleSet(@"虛擬數據")//設置圖表副標題
.categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])//設置圖表橫軸的內容
.yAxisTitleSet(@"攝氏度")//設置圖表 y 軸的單位
.seriesSet(@[
AAObject(AASeriesElement)
.nameSet(@"2017")
.dataSet(@[@45,@56,@34,@43,@65,@56,@47,@28,@49]),

AAObject(AASeriesElement)
.nameSet(@"2018")
.dataSet(@[@11,@12,@13,@14,@15,@16,@17,@18,@19]),

AAObject(AASeriesElement)
.nameSet(@"2019")
.dataSet(@[@31,@22,@33,@54,@35,@36,@27,@38,@39]),

AAObject(AASeriesElement)
.nameSet(@"2020")
.dataSet(@[@21,@22,@53,@24,@65,@26,@37,@28,@49]),
])
;

4.繪製圖形

[chartView aa_drawChartWithChartModel:chartModel];//圖表視圖對象調用圖表模型對象,繪製最終圖形

5.特別說明

AAChartKit 中扇形圖、氣泡圖都歸屬為特殊類型,所以想要繪製扇形圖、氣泡圖,圖表模型 AAChartModel 設置稍有不同,示例如下

  • 繪製扇形圖,你需要這樣配置模型 AAChartModel
    AAChartModel *chartModel= AAObject(AAChartModel) .chartTypeSet(AAChartTypePie) .titleSet(@"編程語言熱度") .subtitleSet(@"虛擬數據") .dataLabelEnabledSet(true)//是否直接顯示扇形圖數據 .yAxisTitleSet(@"攝氏度") .seriesSet( @[AAObject(AASeriesElement) .nameSet(@"語言熱度佔比") .dataSet(@[ @[@"Java" , @67], @[@"Swift" , @44], @[@"Python", @83], @[@"OC" , @11], @[@"Ruby" , @42], @[@"PHP" , @31], @[@"Go" , @63], @[@"C" , @24], @[@"C#" , @888], @[@"C++" , @66], ]), ] ) ;
  • 繪製氣泡圖,你需要這樣配置模型 AAChartModel

AAChartModel *chartModel= AAObject(AAChartModel)
.chartTypeSet(AAChartTypeBubble)
.titleSet(@"編程語言熱度")
.subtitleSet(@"虛擬數據")
.yAxisTitleSet(@"攝氏度")
.seriesSet(
@[
AAObject(AASeriesElement)
.nameSet(@"2017")
.dataSet(
@[
@[@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]
]),

AAObject(AASeriesElement)
.nameSet(@"2018")
.dataSet(
@[
@[@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]
]),

AAObject(AASeriesElement)
.nameSet(@"2019")
.dataSet(
@[
@[@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一些重要屬性經過配置之後的圖形示例如下

  • 常規折線圖

http://upload-images.jianshu.io/upload_images/2412088-98b871988b57d435.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1867.JPG

  • 常規柱形圖

http://upload-images.jianshu.io/upload_images/2412088-c791a9a5bee44502.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1873.JPG

  • y 軸翻轉的堆積曲線填充圖

http://upload-images.jianshu.io/upload_images/2412088-199de612208c6a17.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1871.JPG

  • x 軸翻轉的堆積曲線填充圖

http://upload-images.jianshu.io/upload_images/2412088-d089326452b19a11.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1869.JPG

  • x 軸翻轉的百分比堆積曲線填充圖

http://upload-images.jianshu.io/upload_images/2412088-dbbcf79f7946bb96.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1863.JPG

  • 輻射化堆積折線填充圖

http://upload-images.jianshu.io/upload_images/2412088-2d08fb7437c80e40.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1870.JPG

  • 輻射化百分比堆積折線填充圖

http://upload-images.jianshu.io/upload_images/2412088-db06aeb086a41209.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1868.JPG

  • 頭部為橢圓形的百分比堆積柱形圖

http://upload-images.jianshu.io/upload_images/2412088-4e2e142fc4bae5c2.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1866.JPG

  • 頭部為楔形的百分比堆積條形圖

http://upload-images.jianshu.io/upload_images/2412088-aaed41eb3c989d48.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
IMG_1865.JPG

AAChartModel 屬性配置列表

AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, title);//標題內容
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, subtitle);//副標題內容

AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, chartType);//圖表類型
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, stacking);//堆積樣式
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, symbol);//曲線點類型："circle", "square", "diamond", "triangle","triangle-down"，默認是"circle"
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, zoomType);//縮放類型

AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, inverted);//x 軸是否垂直
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisReversed);// x 軸翻轉
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisReversed);//y 軸翻轉
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, crosshairs);//是否顯示準星線(默認顯示)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, gradientColorEnable);//是否要為漸變色
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, polar);//是否極化圖形(變為雷達圖)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, dataLabelEnabled);//是否顯示數據
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisLabelsEnabled);//x軸是否顯示數據
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, categories);//圖表橫坐標每個點對應的名稱
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, xAxisGridLineWidth);//x軸網格線的寬度
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisLabelsEnabled);//y軸是否顯示數據
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, yAxisTitle);//y軸標題
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yAxisGridLineWidth);//y軸網格線的寬度

AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, colorsTheme);//圖表主題顏色數組
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, series);

AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, legendEnabled);//是否顯示圖例
AAPropStatementAndFuncStatement(copy, AAChartModel , NSString *, legendLayout);
AAPropStatementAndFuncStatement(copy, AAChartModel , NSString *, legendAlign);
AAPropStatementAndFuncStatement(copy, AAChartModel , NSString *, legendVerticalAlign);

AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, backgroundColor);//圖表背景色
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, options3dEnable);//是否3D化圖形(僅對條形圖,柱狀圖有效)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dAlpha);
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dBeta);
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dDepth);//3D圖形深度

AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, borderRadius);//柱狀圖長條圖頭部圓角半徑(可用於設置頭部的形狀)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, markerRadius);//折線連接點的半徑長度

推薦閱讀：

※ggplot畫圖中有哪些賞心悅目的顏色搭配？
※想請問一下 生物信息和大數據可視化 兩個方向哪個前景更好？求具體分析，謝謝啦~
※像DCCI、艾瑞這種偏互聯網的數據分析的公司還有哪些？這類公司的分析師的發展如何？
※c/c++ 有哪些數據可視化類庫？
※針對繪圖方面的需求，matlab、python和R哪個更加強大？

TAG:編程 | iOS開發 | Android開發 | 數據可視化 |