Swift 3.0 Charts 简单使用
来源:RiberWang     阅读:754
源码超市
发布于 2019-06-11 01:59
查看主页

前言:因为项目(Swift项目与OC混编 OC控制器使用Charts)需要用到折线图,之前用过PNChart感觉还不错,引入后发现效果却没安卓的好(安卓使用MPAndroidChart),So最终决定引入Charts。虽然网上说引入后包会增大很多,但是为达目的我要不择手段!

最终效果图

因为我们的项目未使用pods,所以下面我详情一下手动引入时发现的坑。下面我以Charts 3.0.1版本为例,别问我为什么?由于我们的项目使用的是Swift 3.0,别问我为什么不更新?大佬们,我不敢啊!小弟做不到啊!

手动引入步骤

  1. 选择基础库下载到本地
  2. 导入Charts到工程,并设置工程属性
  3. 增加代码,实现基本效果
  4. 运行程序,查看效果能否一致
  5. 修改,修改,修改

详细步骤

1. 进入github地址,点击Branch:master->Tags,选择对应的版本,而后点击右侧红色按钮Clone or download->Download ZIP下载至本地
Charts地址
2. 导入Charts到工程,并设置工程属性

2-1.将下载下来的Charts.xcodeproj和Source文件保留,其他删除就可


Charts 3.0.1

2-2.将Charts文件夹拷贝至工程,右键工程,点击Add Files to “project name”,注意只增加Charts.xcodeproj


右键增加Charts到工程
2-3.点击工程->TARGETS->General -> Embedded Binaries -> + ,选择Charts.framework,导入framework;而后把Build Settings->Build Options->Always Embed Swift Standard Libraries的值设置成YES
导入Charts.framework
3. 增加代码,实现基本效果

3-1.在控制器.m头文件中引入@import Charts;,初始化LineChartView,设置属性

    self.lineChartView=[[LineChartView alloc]initWithFrame:CGRectMake(0, 0, self.lineChartBgScroll.width, 200)];    [self.lineChartBgScroll addSubview:self.lineChartView];    //设置折线图形容    self.lineChartView.noDataText=@"暂无数据"; //没数据时显示    self.lineChartView.scaleYEnabled=NO; //启动Y轴缩放    self.lineChartView.scaleXEnabled=NO; //启动X轴缩放    self.lineChartView.doubleTapToZoomEnabled=NO; //取消双击缩放    // 隐藏折线图形容及图例样式    self.lineChartView.chartDescription.enabled = NO;    self.lineChartView.dragEnabled=YES; //启动拖拽图标    self.lineChartView.legend.enabled = NO; // 隐藏说明    self.lineChartView.dragDecelerationEnabled=YES; //拖拽后能否有惯性效果    self.lineChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后惯性效果的摩擦系数(0~1),数值越小,惯性越不显著    //设置X轴样式    ChartXAxis *xAxis = self.lineChartView.xAxis;    xAxis.enabled = YES;    xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//设置X轴线宽    xAxis.labelPosition = XAxisLabelPositionBottom;//X轴的显示位置,默认是显示在上面的    xAxis.drawGridLinesEnabled = NO;//不绘制网格线    xAxis.drawLabelsEnabled = YES;    // xAxis.spaceBetweenLabels = 4;//设置label间隔    xAxis.labelTextColor = rgb(145, 148, 153);//label文字颜色        //设置Y轴样式    self.lineChartView.rightAxis.enabled = NO;//不绘制右边轴    ChartYAxis *leftAxis = self.lineChartView.leftAxis;//获取左边Y轴    leftAxis.labelCount = 6;//Y轴label数量,数值不肯定,假如forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均    leftAxis.drawGridLinesEnabled = NO;//    leftAxis.drawAxisLineEnabled = NO;    leftAxis.forceLabelsEnabled = NO;//不强制绘制指定数量的label    // leftAxis.showOnlyMinMaxEnabled = NO;//能否只显示最大值和最小值    leftAxis.axisMinimum = 0;//设置Y轴的最小值    leftAxis.drawZeroLineEnabled = YES;//从0开始绘制//    leftAxis.axisMaximum = 105;//设置Y轴的最大值    leftAxis.inverted = NO;//能否将Y轴进行上下翻转    leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//Y轴线宽    leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色    leftAxis.valueFormatter = [[RBYAxisFormatter alloc] init];//自己设置格式    leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置    leftAxis.labelTextColor =[UIColor blackColor];//文字颜色    leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字体

3-2.数据返回后增加数据

    if (self.dataArray.count == 0) {        return;    }    NSMutableArray *xLables = [NSMutableArray arrayWithCapacity:0];    NSMutableArray *data01Array = [NSMutableArray arrayWithCapacity:0];    NSMutableArray *data02Array = [NSMutableArray arrayWithCapacity:0];    NSMutableArray *data03Array = [NSMutableArray arrayWithCapacity:0];    NSMutableArray *data04Array = [NSMutableArray arrayWithCapacity:0];    int i = 0;    for (NSDictionary *dic in self.dataArray) {        [xLables addObject:[dic[@"promotetime"] substringFromIndex:5]];        NSString *priceStr = dic[@"priceStr"];        NSArray *priceArray = [priceStr componentsSeparatedByString:@","];        ChartDataEntry *entry1 = [[ChartDataEntry alloc] initWithX:i y:[priceArray.firstObject doubleValue]];        [data01Array addObject:entry1];        ChartDataEntry *entry2 = [[ChartDataEntry alloc] initWithX:i y:[priceArray[1] doubleValue]];        [data02Array addObject:entry2];        ChartDataEntry *entry3 = [[ChartDataEntry alloc] initWithX:i y:[priceArray[2] doubleValue]];        [data03Array addObject:entry3];        ChartDataEntry *entry4 = [[ChartDataEntry alloc] initWithX:i y:[priceArray.lastObject doubleValue]];        [data04Array addObject:entry4];        i++;    }    // 设置数据格式    self.lineChartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:xLables];    // 设置x轴数据个数 不设置会出现多个重复数据    self.lineChartView.xAxis.labelCount = xLables.count;        // 设置x轴数据均匀排列 不设置会出现分布不均匀    self.lineChartView.xAxis.granularity = 1.0;    self.lineChartView.xAxis.granularityEnabled = YES;    LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithValues:data01Array label:@"第一名"];    set1.axisDependency = AxisDependencyLeft;    set1.drawValuesEnabled = YES;//能否在拐点处显示数据    set1.valueTextColor = rgb(255, 153, 170);    set1.lineWidth = 1.5;    set1.fillAlpha = 1;    [set1 setColor:rgb(255, 153, 170)];    set1.fillColor = rgb(255, 153, 170);    set1.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];    set1.drawCirclesEnabled = NO;    set1.drawCircleHoleEnabled = NO;        LineChartDataSet *set2 = [[LineChartDataSet alloc] initWithValues:data02Array label:@"第二名"];    set2.axisDependency = AxisDependencyLeft;    set2.drawValuesEnabled = YES;//能否在拐点处显示数据    set2.valueTextColor = rgb(179, 204, 255);    set2.lineWidth = 1.5;    set2.drawCirclesEnabled = NO;    set2.fillAlpha = 0.26;    [set2 setColor:rgb(179, 204, 255)];    set2.fillColor = [UIColor colorWithRed:51/255.0 green:181/255.0 blue:229/255.0 alpha:1.0];    set2.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];    set2.drawCircleHoleEnabled = NO;    LineChartDataSet *set3 = [[LineChartDataSet alloc] initWithValues:data03Array label:@"第三名"];    set3.axisDependency = AxisDependencyLeft;    set3.drawValuesEnabled = YES;//能否在拐点处显示数据    set3.valueTextColor = rgb(255, 204, 153);    set3.lineWidth = 1.5;    set3.drawCirclesEnabled = NO;    set3.fillAlpha = 0.26;    [set3 setColor:rgb(255, 204, 153)];    set3.fillColor = [UIColor colorWithRed:51/255.0 green:181/255.0 blue:229/255.0 alpha:1.0];    set3.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];    set3.drawCircleHoleEnabled = NO;        LineChartDataSet *set4 = [[LineChartDataSet alloc] initWithValues:data04Array label:@"我"];    set4.axisDependency = AxisDependencyLeft;    set4.drawValuesEnabled = YES;//能否在拐点处显示数据    set4.valueTextColor = rgb(28, 188, 66);    set4.lineWidth = 1.5;    set4.drawCirclesEnabled = NO;    set4.fillAlpha = 0.26;    [set4 setColor:rgb(28, 188, 66)];    set4.fillColor = [UIColor colorWithRed:51/255.0 green:181/255.0 blue:229/255.0 alpha:1.0];    set4.highlightColor = [UIColor colorWithRed:224/255.0 green:117/255.0 blue:117/255.0 alpha:1.0];    set4.drawCircleHoleEnabled = NO;    NSMutableArray *dataSets = [[NSMutableArray alloc] init];    [dataSets addObject:set1];    [dataSets addObject:set2];    [dataSets addObject:set3];    [dataSets addObject:set4];    LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];    [data setValueFont:[UIFont systemFontOfSize:10]];        // 设置y轴值所有点的数据格式    [data setValueFormatter:[[RBYPointFormatter alloc] init]];    // 设置x轴左右间距    self.lineChartView.xAxis.axisMinimum = data.xMin - 0.8;    self.lineChartView.xAxis.axisMaximum = data.xMax + 0.8;        self.lineChartView.data = data;    // 设置显示最大最小范围 超过可滑动 即设置滑动    [self.lineChartView setVisibleXRangeWithMinXRange:1 maxXRange:8];        // 显示所有线条    [self.lineChartView animateWithXAxisDuration:0.5];

3-3.格式化x轴数据、y轴数据、y轴折线点值数据,创立model类,继承NSObject,再新建一个类,分别遵守IChartAxisValueFormatter和IChartValueFormatter

.h// y轴点数据格式化@interface RBYPointFormatter : NSObject <IChartValueFormatter>@end// y轴数据格式化@interface RBYAxisFormatter : NSObject <IChartAxisValueFormatter>@end

设置数据格式

.m@implementation RBYPointFormatter- (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler {    return [NSString stringWithFormat:@"%.2f",value];}@end@implementation RBYAxisFormatter- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {    return [NSString stringWithFormat:@"¥%.2f",value];}@end

使用
leftAxis.valueFormatter = [[RBYAxisFormatter alloc] init];//自己设置格式

最终效果图
注意:

1.均匀排布、左右间距和滑动设置

   self.lineChartView.xAxis.labelCount = xLables.count;        // 设置x轴数据均匀排列 不设置会出现分布不均匀    self.lineChartView.xAxis.granularity = 1.0; 
    // 设置x轴左右间距    self.lineChartView.xAxis.axisMinimum = data.xMin - 0.8;    self.lineChartView.xAxis.axisMaximum = data.xMax + 0.8;        self.lineChartView.data = data;    // 设置显示最大最小范围 超过可滑动 即设置滑动    [self.lineChartView setVisibleXRangeWithMinXRange:1 maxXRange:8];

2.假如这时候你发现你的工程Scheme运行的设施多出了My Mac和Build Only decices多出了Generic tcOS device


多平台Scheme

处理方案:
因为我是导入Charts库后出现的该问题,所以我进到Charts的工程设置
1.Build Setting->TARGET->Architectures->Base SDK,将macOS修改为iOS


修改Base SDK

2.Build Setting->TARGET->Architectures->Supported Plateforms,将tvOS修改为iOS


修改Supported Plateforms

网上的其余处理方案(处理不能显示真机或者模拟器,只显示My Mac)

关闭Xcode,找到该工程项目目录,找到该项目的***.xcodeproj 文件,而后右键点击选择“显示包内容”;包内容中会显示以下三项:project.pbxproj ,project.xcworkspace ,xcuserdata ,xcshareddata(不能删除这个,多人开发会用到)接着选择“xcuserdata”这个文件夹,将其整个移到废纸篓,重新打开你的项目,则可使用真机或者模拟器;假如上述方法没有用,在可以再Build Setting->TARGET->Architectures->Base SDK版本就可。

修改之后不显示My Mac
免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
Nginx基础,反向代理商,负载均衡配置,仅此一篇文章就够了
监控软件 Nagios-3.2.3配置总结,一步一步详细设置
在docker容器中使用混动测试工具chaosblade
4.5 停泊窗口
sql必会基础1
首页
搜索
订单
购物车
我的