iOS·Charts图表

可以绘制柱状图、折线图、K线图、饼状图等Charts,且和Android一致的图表界面MPAndroidChart

一、下载Charts框架

下载地址:https://github.com/danielgindi/Charts.
解压后的文件夹里面的内容是这个样子的,如下图:

111.png

下载版本,如下图:
222.png

二、导入Charts.xcodeproj工程

手动集成
1.拖拽 Charts.xcodeproj 文件到你的工程中,Source文件夹拖拽到同文件夹下单不引用进工程。
2.在 TARGETS —> General —> Embedded Binaries 下,点击 + 按钮,选择 Charts.framework (重要*动态库添加,不添加真机运行报错)
3.Clean一下,编译一下
4.设置编译选项,找到Build Settings -> Embedded Content Contains Swift Code 选项,设置为Yes,Build Settings -> Always Embed Swift Standard Libraries 选项,设置为Yes,如下图:


333.png

5.如果需要在 ObjC 的工程中使用 Swift 文件,你需要导入 Bridging Header 文件。通常 Bridging Header 文件被命名为 “YourProject-Swift.h”。
6.在使用图表的文件中要写上的Swift头文件,@import Charts ;

三、添加测试代码

import "MyViewController.h"

@import Charts;
@interface MyViewController
@property (strong, nonatomic)PieChartView * pieChartView;
@end
@implementation MyViewController
-(void)creasePieChartView{
self.pieChartView = [[PieChartView alloc] initWithFrame:CGRectMake(0, 50, _View.frame.size.width- 10, _View.frame.size.height - 50)];
// self.pieChartView.backgroundColor = [UIColor lightGrayColor];
[_View addSubview:self.pieChartView];
[self.pieChartView setExtraOffsetsWithLeft:5 top:10 right:70 bottom:5];//饼状图距离边缘的间隙
self.pieChartView.usePercentValuesEnabled = YES;//是否根据所提供的数据, 将显示数据转换为百分比格式
self.pieChartView.dragDecelerationEnabled = YES;//拖拽饼状图后是否有惯性效果
self.pieChartView.drawSlicesUnderHoleEnabled= NO;//
self.pieChartView.chartDescription.enabled = NO;//饼状图描述
self.pieChartView.drawHoleEnabled = YES;//饼状图是否是空心
self.pieChartView.holeRadiusPercent = 0.5;//空心半径占比
self.pieChartView.holeColor = [UIColor clearColor];//空心颜色
self.pieChartView.transparentCircleRadiusPercent = 0.55;//半透明空心半径占比
self.pieChartView.transparentCircleColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:0.3];//半透明空心的颜色
if (self.pieChartView.isDrawHoleEnabled == YES) {
self.pieChartView.drawCenterTextEnabled = YES;//是否显示中间文字
//普通文本
// self.pieChartView.centerText = @"饼状图";//中间文字
//富文本
NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图bbb\n饼状图aaa"];
[centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16],
NSForegroundColorAttributeName: [UIColor orangeColor]}
range:NSMakeRange(0, centerText.length)];
self.pieChartView.centerAttributedText = centerText;
}
self.pieChartView.legend.maxSizePercent = 1;//图例在饼状图中的大小占比, 这会影响图例的宽高
self.pieChartView.legend.formToTextSpace = 5;//文本间隔
self.pieChartView.legend.font = [UIFont systemFontOfSize:10];//字体大小
self.pieChartView.legend.textColor = [UIColor grayColor];//字体颜色
// self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter;//图例在饼状图中的位置
self.pieChartView.legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight;
self.pieChartView.legend.verticalAlignment = ChartLegendVerticalAlignmentTop;
self.pieChartView.legend.orientation = ChartLegendOrientationVertical;
self.pieChartView.legend.form = ChartLegendFormCircle;//图示样式: 方形、线条、圆形
self.pieChartView.legend.formSize = 8;//图示大小
[self.pieChartView setRotationEnabled:false];//禁止拖拽
[self setData];
}

  • (PieChartData *)setData{
    //每个区块的数据
    //每个区块的名称或描述
    NSMutableArray *arr = [[NSMutableArray alloc]init];
    NSMutableArray *nameArr = [[NSMutableArray alloc]init];
    for (pieChart *model in _pieCharModel.pieChart) {
    [arr addObject:model.totalamt];//@[@"8.54",@"3.26",@"2"];
    [nameArr addObject:model.typename];
    }
    NSMutableArray *values = [[NSMutableArray alloc] init];
    // IMPORTANT: In a PieChart, no values (Entry) should have the same xIndex (even if from different DataSets), since no values can be drawn above each other.
    for (int i = 0; i < arr.count; I++)
    {
    NSString * aaa = arr[i];
    double bb = aaa.doubleValue;
    [values addObject:[[PieChartDataEntry alloc] initWithValue: bb label: nameArr[i]]];
    }
    //dataSet
    PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithValues:values label:@"aaaf"];
    dataSet.drawValuesEnabled = YES;//是否绘制显示数据
    NSMutableArray *colors = [[NSMutableArray alloc] init];
    [colors addObjectsFromArray:ChartColorTemplates.vordiplom];
    [colors addObjectsFromArray:ChartColorTemplates.joyful];
    [colors addObjectsFromArray:ChartColorTemplates.colorful];
    [colors addObjectsFromArray:ChartColorTemplates.liberty];
    [colors addObjectsFromArray:ChartColorTemplates.pastel];
    [colors addObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]];
    dataSet.colors = colors;//区块颜色
    dataSet.sliceSpace = 5;//相邻区块之间的间距
    dataSet.selectionShift = 8;//选中区块时, 放大的半径
    dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名称位置
    dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//数据位置
    //数据与区块之间的用于指示的折线样式
    dataSet.valueLinePart1OffsetPercentage = 0.85;//折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远
    dataSet.valueLinePart1Length = 0.5;//折线中第一段长度占比
    dataSet.valueLinePart2Length = 0.4;//折线中第二段长度最大占比
    dataSet.valueLineWidth = 1;//折线的粗细
    dataSet.valueLineColor = [UIColor brownColor];//折线颜色
    //data
    PieChartData *data = [[PieChartData alloc] initWithDataSet:dataSet];
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    formatter.numberStyle = NSNumberFormatterPercentStyle;
    formatter.maximumFractionDigits = 0;//小数位数
    formatter.multiplier = @1.f;
    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:formatter]];//设置显示数据格式
    [data setValueTextColor:[UIColor brownColor]];
    [data setValueFont:[UIFont systemFontOfSize:10]];
    self.pieChartView.data = data;
    [ self.pieChartView setNeedsDisplay];
    return data;
    }
    @end

*问题
dyld: Library not loaded: @rpath/Charts.framework/Charts
Referenced from: /var/containers/Bundle/Application/FFFFESFEF24432FFFRRER342422HHWH/test.app/test
Reason: image not found
动态库未链接到项目内
解决办法:
在 TARGETS —> General —> Embedded Binaries 下,点击 + 按钮,选择 Charts.framework就可以解决问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容

  • 一、下载Charts后可以到里面的内容 将下载后解压后的整个文件夹复制到工程里 但是只导入 工程Charts.xc...
    浪周周_f157阅读 1,081评论 0 1
  • 最近公司项目中要加一个折线图的需求因为是金融项目考虑到后期可能会有大量的饼状和折线图的需求,仔细搜索一番觉得用个成...
    约翰丶码农阅读 19,108评论 10 24
  • 在生成PDF报表时,往往需要动态的生成表格和一些折线图、饼状图等,利用RML文件和reportlab的api来动态...
    蒋狗阅读 2,832评论 1 1
  • 最近公司在做一个关于柱状图,饼状图等数据图表展示的APP,在github上看到Charts的开源库有着近10000...
    mimi不是米阅读 11,007评论 28 18
  • 最近工程用到了 Charts, 网上苦苦找寻, 只发现了 Android 的详细使用说明, 于是决定翻译一下, 方...
    __block阅读 2,795评论 12 5