【ios开发】 关于Charts框架第一期:集成和绘制折线图

前段时间写项目的时候, 遇到了一个需要画折线图需求,研究了一下, 觉得还是直接使用成熟的Charts框架(一款用于绘制图表的框架,可以绘制柱状图、折线图、K线图、饼状图等)来实现。

去git上下载了Charts源码看了下之后, 发现是swift版本的, 而我这个项目是使用OC写的, 那就记录一下如何集成以及oc和swift混编吧~

折线图.png

一、用cocoapods导入swift框架到OC项目

cocoapods的安装和使用这里就不详叙了,如果你还没有安装cocospods,请参考此链接(https://www.jianshu.com/p/8115e7afce03)

我们直接开始pod。

打开我们的项目,点击Pods-> Podfile, 输入 pod 'Charts', use_frameworks! -> 保存。

pod Charts.png

打开终端, cd 进项目目录, 然后pod insatll, 静静等待pod 完成。

pod install.png

这里有一个重点: "use_frameworks!"
为什么一定要写这句代码呢?

oc项目cocoapods后,默认第三方库 #use_frameworks!
swift项目cocoapods后,默认第三方库 use_frameworks!

所以用cocoapods 导入swift 框架到swift项目和OC项目都必须要 use_frameworks!

二、创建桥接文件

桥接文件在首次创建swift文件时会自动生成。如果不小心删除后, 也可以手动添加,不过名字必须是“ProjectName-Bridging-Header.h”头文件(名称组成:工程名-Bridging-Header.h)。

桥接文件.png

创建一个Test.swift,根据提示创建好桥接文件,名称不要进行改动:

image.png

创建好之后我们编译一遍,看看项目会不会报错。(哈哈哈, 并没有~~)这个时候,你可以把之前创建的swift文件删除了。

三、测试集成是否成功

在需要绘制的界面导入我们的桥接文件和charts头文件,直接创建一个折线图。

测试.png
测试结果.png

由于没有数据,所以出现“No chart data avaliable”就代表集成好了。

四、绘制折线图

集成好之后我们就正式开始绘制折线图了。

先进行一些配置:
1、桥接文件里引入Charts;
2、Build Settings -> Packaging -> Defines Module ->Yes

设置1.png
设置2.png

导入头文件 #import "TestPods-Swift.h"
1, 描述一个折线图对象, 懒加载创建一下。

- (LineChartView *)lineChartView
{
   if (!_lineChartView)
   {
    _lineChartView = [[LineChartView alloc] init];
    _lineChartView.backgroundColor =  [UIColor whiteColor];
    _lineChartView.chartDescription.enabled = YES;
    _lineChartView.delegate = self;
    
    _lineChartView.scaleYEnabled = YES;         // 取消Y轴缩放
    _lineChartView.scaleXEnabled = NO;          // 取消X轴缩放
    _lineChartView.doubleTapToZoomEnabled = NO; // 取消双击缩放
    _lineChartView.dragEnabled = NO;            // 关闭拖拽图标
    _lineChartView.legend.enabled = NO;         // 关闭图例显示
    [_lineChartView setExtraOffsetsWithLeft:13 top:20 right:40 bottom:0];
    
    // 绘制
    _lineChartView.rightAxis.enabled = NO;          // 绘制右边轴
    _lineChartView.leftAxis.enabled = NO;           // 绘制左边轴
    
    // Y轴设置
    ChartYAxis *leftAxis = _lineChartView.leftAxis;
    [leftAxis setXOffset:15.0f];
    
    leftAxis.forceLabelsEnabled = YES;  // 强制绘制指定数量的label
    leftAxis.labelCount = 8;
    
    leftAxis.gridColor = [UIColor clearColor]; // 网格线颜色
    leftAxis.gridAntialiasEnabled = YES;       // 开启抗锯齿
    leftAxis.inverted = NO;                    // 是否将Y轴进行上下翻转
    
    // X轴设置
    ChartXAxis *xAxis = _lineChartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom; // 设置x轴数据在底部
    xAxis.axisLineColor = [UIColor clearColor];     // X轴颜色
    xAxis.granularityEnabled = YES;                 // 设置重复的值不显示
    xAxis.gridColor = [UIColor clearColor];
    
    xAxis.labelTextColor =  UIColorFromHEXA(0xa7b0c2,1.0);    // 文字颜色
    NSNumberFormatter *xAxisFormatter = [[NSNumberFormatter alloc] init];
    xAxisFormatter.positiveSuffix = @":00";
    xAxisFormatter.positivePrefix = @"|";
    xAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:xAxisFormatter];
    
    // 能够显示的数据数量
    _lineChartView.maxVisibleCount = 999;
    
    // 展现动画
    [_lineChartView animateWithYAxisDuration:0.75f];
    
    // 设置选中时气泡
    XYMarkerView *marker = [[XYMarkerView alloc] initWithColor:UIColorFromHEXA(0x00bcac,1.0) font:[UIFont systemFontOfSize:12.0]  textColor:UIColor.whiteColor insets:UIEdgeInsetsMake(3, 3, 16.0, 3) xAxisValueFormatter:_lineChartView.xAxis.valueFormatter];
    marker.chartView = _lineChartView;
    marker.minimumSize = CGSizeMake(30.0f, 15.0f);
    _lineChartView.marker = marker;
   }
  return _lineChartView;
}

2, 处理折线图X轴,Y轴显示的数据

      - (void)setLineChartWithXData:(NSArray *)xData yData:(NSArray *)yData
    {
     if (xData.count > 0)
     {
       //对应Y轴上面需要显示的数据
       NSMutableArray *yVals = [[NSMutableArray alloc] init];
    
       for (int i = 0; i < yData.count; I++)
      {
          ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:[xData[i] doubleValue] y:[yData[i] doubleValue]];
          [yVals addObject:entry];
        
          if (i == yData.count - 1)
          {
              self.contentLab.text = [NSString stringWithFormat:@"%g℃",entry.y];
          }
      }
    
      // 设置折线的样式
      LineChartDataSet *set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];
      set1.lineWidth = 1.0f;       // 折线宽度
      [set1 setColor:BtnBgColor];  // 折线颜色
      set1.drawValuesEnabled = NO; // 是否在拐点处显示数据
    
      // 折线拐点样式
      set1.drawCirclesEnabled = YES;      // 是否绘制拐点
      set1.drawFilledEnabled = NO;        // 是否填充颜色
      [set1 setCircleColor:BtnBgColor];   // 拐点 圆的颜色
      set1.circleRadius = 5.0f;
      set1.highlightColor = [UIColor clearColor];
    
      NSMutableArray *dataSets = [[NSMutableArray alloc] init];
      [dataSets addObject:set1];
    
      LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
      [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:11.0f]]; // 文字字体
      [data setValueTextColor:[UIColor blackColor]];                               // 文字颜色
    
      _lineChartView.data = data;
    
      [_lineChartView highlightValue: [[ChartHighlight alloc] initWithX:[xData[xData.count - 1] doubleValue] y:[yData[yData.count - 1] doubleValue] dataSetIndex:0 dataIndex:0]];
      }
    }

3,模拟真实数据

[self setLineChartWithXData:@[@"9:00",@"10:00",@"11:00",@"12:00",@"13:00",@"14:00"] yData:@[@"47",@"49",@"46",@"51",@"45",@"43"]];

4, 最终效果


效果.png

以上呢, 就是一个简单的折线图的绘制过程了。
有需要的,可以直接下载Demo查看~
Demo地址(https://github.com/summersun08/ChartsTest.git

看在我这么可爱的份上, 喜欢就给我一个小心心了❤️❤️❤️


给你一个小心心

——————————————————————————-

更新一个小细节:

OC和Swift混编时, import "工程名-swift.h"时,总会提示这个".h Not Found"

这个问题很好解决,

TARGET ->Build Settings-> Packaging -> Product Module Name , 删掉默认的,重新输入工程名

之后clear工程, 重新运行就好。

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

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 自从上次与胭脂不欢而散后,已经几日没来留香院了。若不是为打听那人的事情,司徒存孝真是不愿意再看那女人的脸,想到她...
    栀九爷阅读 537评论 8 9
  • 海棠吹落的时节 我从扶疏的青春里 打马走过 穿过 熟悉的街道向晚 去听 一曲故乡的歌谣 蓦然回首的似水流年 ...
    安安Ann阅读 289评论 0 0
  • 1、嘿嘿~大家好! 2、基本信息:原名陈端仁,广东湛江人。现就读于广东湛江岭南师范学院,一名在校大学生。94年生人...
    端银阅读 502评论 0 0
  • 国奥越野08-09提高班训练总结 时间:2018-10--27-28 地点:奥体中心训练场、宝联体育公园 球队:0...
    鱼越_02c9阅读 197评论 0 0