酷店

SSWLineChartView.m 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. //
  2. // SSWLineChartView.m
  3. // SSWCharts
  4. //
  5. // Created by WangShaoShuai on 2018/5/3.
  6. // Copyright © 2018年 com.sswang.www. All rights reserved.
  7. //
  8. #import "SSWLineChartView.h"
  9. @interface SSWLineChartView (){
  10. CGFloat _totalWidth;
  11. CGFloat _totalHeight;
  12. CAShapeLayer *_AxiasLineLayer;
  13. CAShapeLayer *_lineLayer;
  14. }
  15. @property(nonatomic)UIScrollView *scrollView;
  16. @property(nonatomic)UIView *contentView;
  17. @property(nonatomic)NSMutableArray *barsStartPointsArr;
  18. @property(nonatomic)NSMutableArray *barsEndPointsArr;
  19. @property(nonatomic)NSMutableArray *linePointPathArr;
  20. @property(nonatomic)NSMutableArray *linePointLayerArr;
  21. @property(nonatomic)UILabel *unitLab;
  22. @property(nonatomic)UIButton *dayBtn;
  23. @property(nonatomic)UIButton *hourBtn;
  24. @property(nonatomic)UIView *lineView;
  25. @property(nonatomic)NSString *changeTime;
  26. @end
  27. @implementation SSWLineChartView
  28. -(instancetype)initWithChartType:(SSWChartsType)type{
  29. self = [super initWithChartType:type];
  30. if (self) {
  31. [self setUp];
  32. _changeTime = @"1";
  33. }
  34. return self;
  35. }
  36. -(void)setUp{
  37. self.xValuesArr = [@[] mutableCopy];
  38. self.yValuesArr = [@[] mutableCopy];
  39. self.barsStartPointsArr = [@[] mutableCopy];
  40. self.barsEndPointsArr = [@[] mutableCopy];
  41. self.linePointPathArr = [@[] mutableCopy];
  42. self.linePointLayerArr = [@[] mutableCopy];
  43. self.barWidth =SCREEN_WIDTH/5-16;
  44. self.gapWidth = 5;
  45. self.yScaleValue = 100;
  46. self.yAxisCount = 5;
  47. self.showEachYValus=YES;
  48. self.lineColor = [UIColor colorWithHexString:ThemeColor];
  49. self.userInteractionEnabled=YES;
  50. [self addSubview:self.scrollView];
  51. [self.scrollView addSubview:self.contentView];
  52. [self.scrollView addSubview:self.unitLab];
  53. [self addSubview:self.lineView];
  54. [self addSubview:self.hourBtn];
  55. [self addSubview:self.dayBtn];
  56. self.scrollView.userInteractionEnabled=YES;
  57. [self addTap];
  58. [self.contentView addSubview:self.bubbleLab];
  59. }
  60. -(void)setYValuesArr:(NSMutableArray *)yValuesArr
  61. {
  62. _yValuesArr = yValuesArr;
  63. //获取最大的
  64. NSInteger maxValue = [[yValuesArr valueForKeyPath:@"@max.floatValue"] floatValue];
  65. NSInteger keduValu =(maxValue+(5-maxValue%5))/5;
  66. self.yScaleValue = keduValu;
  67. [self layoutSubviews];
  68. [self draWUpdate];
  69. }
  70. -(void)addTap{
  71. UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
  72. [self.contentView addGestureRecognizer:tap];
  73. }
  74. -(void)tap:(UITapGestureRecognizer *)tap{
  75. CGPoint point = [tap locationInView:self.contentView];
  76. for (UIBezierPath *path in self.linePointPathArr) {
  77. if ([path containsPoint:point]) {
  78. NSInteger index = [self.linePointPathArr indexOfObject:path];
  79. CGPoint endPoint = [self.barsEndPointsArr[index] CGPointValue];
  80. // NSLog(@"点击了第%ld个柱形图",index);
  81. // self.bubbleLab.hidden=NO;
  82. // self.bubbleLab.text = self.yValuesArr[index];
  83. // self.bubbleLab.center = CGPointMake(endPoint.x, endPoint.y-10);
  84. if (self.delegate && [self.delegate respondsToSelector:@selector(SSWChartView:didSelectIndex:)]) {
  85. [self.delegate SSWChartView:self didSelectIndex:index];
  86. }
  87. }
  88. }
  89. }
  90. -(void)setUnit:(NSString *)unit{
  91. self.unitLab.hidden=NO;
  92. _unit=unit;
  93. self.unitLab.text =unit;
  94. }
  95. -(UIScrollView *)scrollView{
  96. if (!_scrollView) {
  97. _scrollView = [[UIScrollView alloc]init];
  98. _scrollView.showsVerticalScrollIndicator = NO;
  99. _scrollView.showsHorizontalScrollIndicator=NO;
  100. _scrollView.clipsToBounds=NO;
  101. }
  102. return _scrollView;
  103. }
  104. -(UIView *)contentView{
  105. if (!_contentView) {
  106. _contentView = [[UIView alloc]init];
  107. // _contentView.clipsToBounds = YES;
  108. }
  109. return _contentView;
  110. }
  111. -(UILabel *)unitLab{
  112. if (!_unitLab) {
  113. _unitLab = [[UILabel alloc]init];
  114. _unitLab.font = [UIFont systemFontOfSize:12];
  115. _unitLab.textColor=[UIColor colorWithHexString:fontColor];
  116. }
  117. return _unitLab;
  118. }
  119. -(UIButton *)hourBtn
  120. {
  121. if (!_hourBtn) {
  122. _hourBtn =[[UIButton alloc]init];
  123. _hourBtn.titleLabel.font =[UIFont systemFontOfSize:12];
  124. [_hourBtn setTitle:@"1小时" forState:UIControlStateNormal];
  125. [_hourBtn setTitleColor:[UIColor colorWithHexString:ThemeColor] forState:UIControlStateNormal];
  126. _hourBtn.tag = 1001;
  127. [_hourBtn addTarget:self action:@selector(changeValues:) forControlEvents:UIControlEventTouchUpInside];
  128. }
  129. return _hourBtn;
  130. }
  131. -(UIButton *)dayBtn
  132. {
  133. if (!_dayBtn) {
  134. _dayBtn =[[UIButton alloc]init];
  135. _dayBtn.titleLabel.font =[UIFont systemFontOfSize:12];
  136. _dayBtn.tag = 2001;
  137. [_dayBtn setTitle:@"24小时" forState:UIControlStateNormal];
  138. [_dayBtn setTitleColor:[UIColor colorWithHexString:@"#bbb9bb"] forState:UIControlStateNormal];
  139. [_dayBtn addTarget:self action:@selector(changeValues:) forControlEvents:UIControlEventTouchUpInside];
  140. }
  141. return _dayBtn;
  142. }
  143. -(UIView *)lineView
  144. {
  145. if (!_lineView) {
  146. _lineView =[[UIView alloc]init];
  147. // _lineView.backgroundColor=[UIColor colorWithHexString:ThemeColor];
  148. }
  149. return _lineView;
  150. }
  151. -(void)layoutSubviews{
  152. self.scrollView.frame =CGRectMake(0, 40, self.bounds.size.width, self.bounds.size.height-50);
  153. self.unitLab.frame = CGRectMake(20, -40, 30, 20);
  154. self.dayBtn.frame=CGRectMake(self.bounds.size.width-70, 0, 60, 15);
  155. self.hourBtn.frame=CGRectMake(self.bounds.size.width-140, 0, 60, 15);
  156. if (_changeTime.integerValue == 1) {
  157. self.lineView.frame=CGRectMake(self.bounds.size.width-117, 15, 14, 1);
  158. }else{
  159. self.lineView.frame=CGRectMake(self.bounds.size.width-47, 15, 14, 1);
  160. }
  161. // [self draWUpdate];
  162. }
  163. -(void)draWUpdate
  164. {
  165. _totalWidth= self.width-60;
  166. _totalHeight=self.scrollView.bounds.size.height-30;
  167. self.scrollView.contentSize = CGSizeMake(30+_totalWidth, 0);
  168. self.contentView.frame = CGRectMake(40,10, _totalWidth,_totalHeight);
  169. [self drawLineChart];
  170. }
  171. //开始绘制图表
  172. -(void)drawLineChart{
  173. [self clear];
  174. [self drawAxis];
  175. [self addYAxisLabs];
  176. [self addXAxisLabs];
  177. [self calculationTheLinePoints];
  178. [self addLine];
  179. [self addLinePoints];
  180. [self showBarChartYValus];
  181. }
  182. //触发界面布局之前清除掉之前的绘制
  183. -(void)clear{
  184. [self.barsStartPointsArr removeAllObjects];
  185. [self.barsEndPointsArr removeAllObjects];
  186. for (CAShapeLayer *layer in self.linePointLayerArr) {
  187. [layer removeFromSuperlayer];
  188. }
  189. [self.linePointLayerArr removeAllObjects];
  190. [_AxiasLineLayer removeFromSuperlayer];
  191. [_lineLayer removeFromSuperlayer];
  192. _AxiasLineLayer=nil;
  193. _lineLayer=nil;
  194. for (UIView *view in self.contentView.subviews) {
  195. if([view isEqual:self.unitLab])continue;
  196. [view removeFromSuperview];
  197. }
  198. }
  199. //画坐标轴
  200. -(void)drawAxis{
  201. UIBezierPath *path = [UIBezierPath bezierPath];
  202. // //画左上角的箭头
  203. // [path moveToPoint:CGPointMake(-5, 5)];
  204. // [path addLineToPoint:CGPointMake(0, 0)];
  205. // [path addLineToPoint:CGPointMake(5, 5)];
  206. //画右上角的箭头
  207. // [path moveToPoint:CGPointMake(_totalWidth-5, _totalHeight-5)];
  208. // [path addLineToPoint:CGPointMake(_totalWidth, _totalHeight)];
  209. // [path addLineToPoint:CGPointMake(_totalWidth-5, _totalHeight+5)];
  210. //画y轴刻度
  211. // for (int i = 0; i<self.yAxisCount; i++) {
  212. // [path moveToPoint:CGPointMake(0, i*(_totalHeight/self.yAxisCount))];
  213. // [path addLineToPoint:CGPointMake(5, i*(_totalHeight/self.yAxisCount))];
  214. // }
  215. //画x轴的刻度
  216. for (int i = 0; i<self.xValuesArr.count; i++) {
  217. CGPoint startPoint = CGPointMake(i*(self.barWidth+self.gapWidth)+self.gapWidth+self.barWidth/2, _totalHeight);
  218. [self.barsStartPointsArr addObject:[NSValue valueWithCGPoint:startPoint]];
  219. [path moveToPoint:startPoint];
  220. [path addLineToPoint:CGPointMake(i*(self.barWidth+self.gapWidth)+self.gapWidth+self.barWidth/2, _totalHeight-5)];
  221. }
  222. // //先画整体的线
  223. [path moveToPoint:CGPointMake(0, _totalHeight)];
  224. [path addLineToPoint:CGPointMake(0, _totalHeight)];
  225. [path addLineToPoint:CGPointMake(_totalWidth, _totalHeight)];
  226. CAShapeLayer *lineLayer = [CAShapeLayer layer];
  227. lineLayer.strokeColor = [UIColor colorWithHexString:@"#606060"].CGColor;
  228. lineLayer.lineWidth = 0.5;
  229. lineLayer.path = path.CGPath;
  230. lineLayer.fillColor = [UIColor clearColor].CGColor;
  231. [self.contentView.layer addSublayer:lineLayer];
  232. _AxiasLineLayer = lineLayer;
  233. }
  234. //给y轴添加刻度显示
  235. -(void)addYAxisLabs{
  236. for (int i =self.yAxisCount ; i>0; i--) {
  237. CGFloat yAxis = self.yScaleValue*i;
  238. UILabel *lab = [[UILabel alloc]init];
  239. lab.frame = CGRectMake(-5, (self.yAxisCount-i)*(_totalHeight/self.yAxisCount)-10, -25, 20);
  240. lab.text = [NSString stringWithFormat:@"%.f",yAxis];
  241. lab.font = [UIFont systemFontOfSize:10];
  242. lab.textAlignment = NSTextAlignmentRight;
  243. UIView *views =[[UIView alloc]initWithFrame:CGRectMake(20, (self.yAxisCount-i)*(_totalHeight/self.yAxisCount), _totalWidth-30, 0.5)];
  244. [self drawDashLine:views lineLength:_totalWidth lineSpacing:0.5 lineColor:[UIColor colorWithHexString:@"878585"]];
  245. [self.contentView addSubview:views];
  246. [self.contentView addSubview:lab];
  247. }
  248. }
  249. /**
  250. ** lineView: 需要绘制成虚线的view
  251. ** lineLength: 虚线的宽度
  252. ** lineSpacing: 虚线的间距
  253. ** lineColor: 虚线的颜色
  254. **/
  255. - (void)drawDashLine:(UIView *)lineView lineLength:(int)lineLength lineSpacing:(int)lineSpacing lineColor:(UIColor *)lineColor
  256. {
  257. CAShapeLayer *shapeLayer = [CAShapeLayer layer];
  258. [shapeLayer setBounds:lineView.bounds];
  259. [shapeLayer setPosition:CGPointMake(CGRectGetWidth(lineView.frame) / 2, CGRectGetHeight(lineView.frame))];
  260. [shapeLayer setFillColor:[UIColor clearColor].CGColor];
  261. // 设置虚线颜色为
  262. [shapeLayer setStrokeColor:lineColor.CGColor];
  263. // 设置虚线宽度
  264. [shapeLayer setLineWidth:0.2];
  265. [shapeLayer setLineJoin:kCALineJoinRound];
  266. // 设置线宽,线间距
  267. [shapeLayer setLineDashPattern:
  268. [NSArray arrayWithObjects:[NSNumber numberWithInt:3],
  269. [NSNumber numberWithInt:1],nil]];
  270. // 设置路径
  271. CGMutablePathRef path = CGPathCreateMutable();
  272. CGPathMoveToPoint(path, NULL, 0, 0);
  273. CGPathAddLineToPoint(path, NULL, CGRectGetWidth(lineView.frame), 0);
  274. [shapeLayer setPath:path];
  275. CGPathRelease(path);
  276. // 把绘制好的虚线添加上来
  277. [lineView.layer addSublayer:shapeLayer];
  278. }
  279. //给x轴添加刻度显示
  280. -(void)addXAxisLabs{
  281. for (int i = 0 ; i<self.xValuesArr.count; i++) {
  282. CGPoint point = [self.barsStartPointsArr[i] CGPointValue];
  283. UILabel *lab = [[UILabel alloc]init];
  284. lab.bounds = CGRectMake(0, 0, self.barWidth+self.gapWidth*4/5, 20);
  285. lab.center = CGPointMake(point.x, point.y+lab.bounds.size.height/2);
  286. lab.text = [NSString stringWithFormat:@"%@",self.xValuesArr[i]];
  287. lab.textColor=[UIColor colorWithHexString:fontColor];
  288. lab.font = [UIFont systemFontOfSize:12];
  289. lab.textAlignment = NSTextAlignmentCenter;
  290. [self.contentView addSubview:lab];
  291. }
  292. }
  293. //计算折线的点坐标
  294. -(void)calculationTheLinePoints{
  295. for (int i = 0 ; i<self.yValuesArr.count; i++) {
  296. CGFloat Y = [(NSString *)self.yValuesArr[i] floatValue];
  297. CGFloat barHeight = (Y/(self.yAxisCount*self.yScaleValue))*_totalHeight;
  298. CGPoint startPoint = [self.barsStartPointsArr[i] CGPointValue];
  299. CGPoint endPoint = CGPointMake(startPoint.x, startPoint.y-barHeight);
  300. [self.barsEndPointsArr addObject:[NSValue valueWithCGPoint:endPoint]];
  301. }
  302. }
  303. //添加折线的点
  304. -(void)addLinePoints{
  305. for (int i = 0 ; i<self.xValuesArr.count; i++) {
  306. CGPoint point = [self.barsEndPointsArr[i] CGPointValue];
  307. UIBezierPath *path = [UIBezierPath bezierPath];
  308. [path addArcWithCenter:point radius:2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
  309. // [path closePath];
  310. [self.linePointPathArr addObject:path];
  311. CAShapeLayer *layer = [CAShapeLayer layer];
  312. layer.strokeColor = self.lineColor.CGColor;
  313. layer.fillColor = self.lineColor.CGColor;
  314. layer.lineWidth=1;
  315. layer.path = path.CGPath;
  316. [layer addAnimation:[self animationWithDuration:0.3*i] forKey:nil];
  317. [self.contentView.layer addSublayer:layer];
  318. [self.linePointLayerArr addObject:layer];
  319. }
  320. }
  321. //添加折线
  322. -(void)addLine{
  323. UIBezierPath *linePath = [UIBezierPath bezierPath];
  324. if (self.barsStartPointsArr.count > 0) {
  325. [linePath moveToPoint:[self.barsEndPointsArr[0] CGPointValue]];
  326. }
  327. for (int i = 1; i<self.barsEndPointsArr.count; i++) {
  328. [linePath addLineToPoint:[self.barsEndPointsArr[i] CGPointValue]];
  329. }
  330. CAShapeLayer *lineLayer = [CAShapeLayer layer];
  331. lineLayer.strokeColor = self.lineColor.CGColor;
  332. lineLayer.lineWidth = 1;
  333. lineLayer.fillColor = [UIColor clearColor].CGColor;
  334. lineLayer.path = linePath.CGPath;
  335. [lineLayer addAnimation:[self animationWithDuration:0.3*self.barsEndPointsArr.count] forKey:nil];
  336. [self.contentView.layer addSublayer:lineLayer];
  337. _lineLayer = lineLayer;
  338. }
  339. //添加动画
  340. -(CABasicAnimation *)animationWithDuration:(CFTimeInterval)duration{
  341. CABasicAnimation *anmiation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  342. anmiation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  343. anmiation.duration =duration;
  344. anmiation.fromValue=@(0);
  345. anmiation.toValue = @(1);
  346. return anmiation;
  347. }
  348. //显示每个柱形图的值
  349. -(void)showBarChartYValus{
  350. if(!self.showEachYValus)return;
  351. for (int i = 0; i<self.xValuesArr.count; i++) {
  352. CGPoint point = [self.barsEndPointsArr[i] CGPointValue];
  353. UILabel *lab = [[UILabel alloc]init];
  354. lab.textColor = self.lineColor;
  355. lab.font = [UIFont systemFontOfSize:10];
  356. lab.text = self.yValuesArr[i];
  357. lab.textAlignment = NSTextAlignmentCenter;
  358. lab.bounds = CGRectMake(0, 0, self.barWidth+self.gapWidth*4/5, 20);
  359. lab.center = CGPointMake(point.x, point.y-10);
  360. [self.contentView addSubview:lab];
  361. }
  362. }
  363. #pragma mark---小时和天切换
  364. -(void)changeValues:(UIButton *)btn
  365. {
  366. if (btn.tag == 1001) {//小时
  367. self.lineView.frame=CGRectMake(self.bounds.size.width-117, 15, 14, 1);
  368. [self.hourBtn setTitleColor:[UIColor colorWithHexString:ThemeColor] forState:UIControlStateNormal];
  369. [self.dayBtn setTitleColor:[UIColor colorWithHexString:@"#bbb9bb"] forState:UIControlStateNormal];
  370. // [self OrderStatistics:@"1"];
  371. _changeTime = @"1";
  372. }else{
  373. self.lineView.frame=CGRectMake(self.bounds.size.width-47, 15, 14, 1);
  374. [self.dayBtn setTitleColor:[UIColor colorWithHexString:ThemeColor] forState:UIControlStateNormal];
  375. [self.hourBtn setTitleColor:[UIColor colorWithHexString:@"#bbb9bb"] forState:UIControlStateNormal];
  376. // [self OrderStatistics:@"0"];
  377. _changeTime = @"0";
  378. }
  379. if (self.changeBtn) {
  380. self.changeBtn(btn);
  381. }
  382. }
  383. #pragma mark---订单统计
  384. -(void)OrderStatistics:(NSString *)type
  385. {
  386. }
  387. @end