iOS 统计图表绘制（UITableView、UIBezierPath）
柱状图、雷达图
项目地址git仓库：Demo
ViewController.m
#pragma mark - UITableViewDelegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"点击的第%ld组的第%ld行",indexPath.section,indexPath.row);
ViewController *vc = [ViewController new];
vc.index = indexPath.row;
[self.navigationController pushViewController:vc animated:YES];
}
// ViewController.h
// dxd_贝塞尔
//
// Created by 窦心东 on 2017/4/20.
// Copyright © 2017年 窦心东. All rights reserved.
//
#import
typedef NS_ENUM(NSUInteger,TuType) {
ZhuZhuangTu = 0,
LeiDaTu = 1,
};
@interface ViewController : UIViewController
/** index */
@property (nonatomic,assign) NSInteger index;
@end
// ViewController.m
// dxd_贝塞尔
//
// Created by 窦心东 on 2017/4/20.
// Copyright © 2017年 窦心东. All rights reserved.
//
#import "ViewController.h"
#import "beisaierView.h"
#import "XDBarView.h"
@interface ViewController ()
{
beisaierView *ber;
}
/** XDBarView */
@property (nonatomic,strong) XDBarView *barview;
@end
#define barViewHeight HEAL_HEIGHT(200)
@implementation ViewController
-(XDBarView *)barview{
if (_barview == nil) {
_barview = [[XDBarView alloc] initWithFrame:CGRectMake(0,300,SCREEN_WIDTH, barViewHeight)];
_barview.defaultColor = ColorWithRGB(218, 218, 218);
_barview.SelectColor = ColorWithHEAL;
_barview.modelArray = @[@{@"colname":@"1",@"cptimes":@"100"},@{@"colname":@"2",@"cptimes":@"200"},@{@"colname":@"3",@"cptimes":@"300"},@{@"colname":@"4",@"cptimes":@"400"},@{@"colname":@"1",@"cptimes":@"100"},@{@"colname":@"2",@"cptimes":@"200"},@{@"colname":@"3",@"cptimes":@"300"},@{@"colname":@"4",@"cptimes":@"400"}];
_barview.barWith = HEAL_WIDTH(60);
_barview.cellHeight = HEAL_HEIGHT(80);
}
return _barview;
}-(void)setIndex:(NSInteger)index{
_index = index;
}- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor whiteColor];
switch (_index) {
case ZhuZhuangTu:
{
self.title = @"柱状图";
[self ZhuZhuangTu_demo];
}
break;
case LeiDaTu:
{
self.title = @"雷达图";
[self LeiDaTu_demo];
}
break;
default:
break;
}
}- (void)LeiDaTu_demo{
ber = [[beisaierView alloc] initWithFrame:CGRectMake(30, 100, 350, 350)];
ber.backgroundColor = [UIColor whiteColor];
ber.header_image = [UIImage imageNamed:@"HEAL.jpg"];
ber.headerimageWidth = 40;
ber.value_array = @[@"40",@"50",@"80",@"50",@"90",@"50",@"70",@"90",@"30"];
ber.title_array = @[@"阴虚",@"痰湿",@"温热",@"血瘀",@"气郁",@"特禀",@"平和",@"气虚",@"阳虚"];
[self.view addSubview:ber];
}- (void)ZhuZhuangTu_demo{
[self.view addSubview:self.barview];
//柱子被惦记的回调
[self.barview selectedWithTableViewPathRowBlock:^(NSString *colname, NSInteger row) {
NSLog(@"%ld点击了柱子colname == %@",(long)row,colname);
}];
//进来先点击的柱子 需要延迟一下 结合网络请求最好了
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSIndexPath * path = [NSIndexPath indexPathForRow:1 inSection:0];
[self.barview newinitSelectedWithTableViewPath:path];
});
}雷达图的使用在上一篇iOS雷达图的绘制贝塞尔曲线的使用UIBezierPath
·
柱状图
XDBarView.h
XDBarView.m
TableViewCell.h//
// XDBarView.h
// 柱状图
//
// Created by 窦心东 on 2017/2/23.
// Copyright © 2017年 窦心东. All rights reserved.
//
#import
typedef void(^SelectedWithTableViewPathRowBlock)(NSString *coldate,NSInteger row);
@interface XDBarView : UIView
@property (nonatomic,copy) void(^SelectedWithTableViewPathRowBlock) (NSString *coldate,NSInteger row);
- (void)selectedWithTableViewPathRowBlock:(SelectedWithTableViewPathRowBlock)block;
/**
* 新图刚显示的时候默认选择的cell
* Api
*/
- (void)newinitSelectedWithTableViewPath:(NSIndexPath *)indexPath;
/** tableview */
@property(nonatomic,strong)UITableView *tb;
/** 默认颜色 */
@property (nonatomic,strong) UIColor *defaultColor;
/** 点击颜色 */
@property (nonatomic,strong) UIColor *SelectColor;
/** 模型数组 {value、日期 （下标）}*/
@property (nonatomic,strong) NSArray *modelArray;
/** 柱状图宽 <60 */
@property (nonatomic,assign) CGFloat barWith;
/** cell点击范围宽度 默认 80*/
@property (nonatomic,assign) CGFloat cellHeight;
/** 记录view */
@property (nonatomic,strong) UIView *currentView;
@end
//
// XDBarView.m
// 柱状图
//
// Created by 窦心东 on 2017/2/23.
// Copyright © 2017年 窦心东. All rights reserved.
//
#import "XDBarView.h"
#import "TableViewCell.h"
#import "XDControl.h"
@interface XDBarView ()<UITableViewDataSource,UITableViewDelegate>{
}
/** footerview */
@property (nonatomic,strong) UIView *footerview;
/** headerview */
@property (nonatomic,strong) UIView *headerview;
/** <#注释#> */
@property (nonatomic,strong) NSIndexPath *indexPathss;
/** 最大数 */
@property (nonatomic,assign) CGFloat maxValue;
@end
@implementation XDBarView
- (instancetype)initWithFrame:(CGRect)frame
{
if([super initWithFrame:frame])
{
[self initViewDidLoad];
}
return self;
}
- (instancetype)init
{
if([super init])
{
[self initViewDidLoad];
}
return self;
}
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
if([super initWithCoder:aDecoder])
{
[self initViewDidLoad];
}
return self;
}
- (UITableView *)tb{
if (_tb == nil) {
_tb = [[UITableView alloc] initWithFrame:CGRectMake(HEAL_X(106), HEAL_Y(-110),HEAL_WIDTH(200),SCREEN_WIDTH) style:UITableViewStylePlain];
_tb.delegate = self;
_tb.dataSource = self;
_tb.transform = CGAffineTransformMakeRotation(-M_PI / 2);//旋转-π/2
_tb.separatorStyle = NO;
_tb.showsVerticalScrollIndicator = NO;
// _tb.alwaysBounceHorizontal= YES;
_tb.tableFooterView = self.footerview;
_tb.tableHeaderView = self.headerview;
}
return _tb;
}
#pragma mark - 懒加载创建头视图headView
- (UIView *)headerview{
if (_headerview == nil) {
_headerview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tb.frame.size.width, SCREEN_WIDTH/2-_cellHeight/2)];
_headerview.backgroundColor = [UIColor clearColor];//64.311594202898561
UIView *line = [XDControl createViewWithFrame:CGRectMake(HEAL_X(_barWith+10), 0,HEAL_WIDTH(1),SCREEN_WIDTH/2-_cellHeight/2) BackgroundColor:ColorWithHEAL];
[_headerview addSubview:line];
}
return _headerview;
}
#pragma mark - 懒加载创建足视图footerview
- (UIView *)footerview{
if (_footerview == nil) {
_footerview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tb.frame.size.width,SCREEN_WIDTH/2-_cellHeight/2)];
_footerview.backgroundColor = [UIColor clearColor];
UIView *line = [XDControl createViewWithFrame:CGRectMake(HEAL_X(_barWith+10), 0,HEAL_WIDTH(1),SCREEN_WIDTH/2+_cellHeight/2) BackgroundColor:ColorWithHEAL];
[_footerview addSubview:line];
}
return _footerview;
}
/** 初始化数据 设置背景view的属性*/
- (void)initViewDidLoad
{
if(!_cellHeight){
_cellHeight = HEAL_HEIGHT(80);
}
if (!_barWith) {
_barWith = HEAL_HEIGHT(60);
}
// self.currentView = [UIView new];
self.backgroundColor = [UIColor whiteColor];
}
- (void)layoutSubviews
{
//添加子视图
[self addSubview:self.tb];
}
- (void)newinitSelectedWithTableViewPath:(NSIndexPath *)indexPath{
// NSIndexPath * path = [NSIndexPath indexPathForRow:5 inSection:0];
[self tableView:self.tb didSelectRowAtIndexPath:indexPath];
}
-(void)setModelArray:(NSArray *)modelArray{
_modelArray = [NSArray arrayWithArray:modelArray];
//arr为实际的模型取出的数组
NSMutableArray * arr = [NSMutableArray array];
for (int i= 0; i<_modelArray.count; i++) {
if (i == 0) {
if (_modelArray[i][@"cptimes"]==nil) {
return;
}
}
[arr addObject:_modelArray[i][@"cptimes"]];
NSLog(@"所有数字是：cptimes%@",_modelArray[i][@"cptimes"]);
}
_maxValue = [[arr valueForKeyPath:@"@max.intValue"] floatValue];
NSLog(@"最大数字是：_maxValue%f",_maxValue);
}
#pragma mark - 分组
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
//#pragma mark - 返回自定义组头
//- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
// UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 70, SCREEN_WIDTH-70, 20)];
// view.backgroundColor = [UIColor whiteColor];
// return view;
//}
//#pragma mark - 返回组头头高
//- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
// return 20;
//}
#pragma mark - 每组几行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return _modelArray.count;
}
#pragma mark - 每行行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return _cellHeight;
}
#pragma mark - tableViewData delegate
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *cellID = @"cellName";
TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (cell == nil) {
cell = [[[NSBundle mainBundle] loadNibNamed:@"TableViewCell" owner:self options:nil] lastObject];
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
UIView *line = [[UIView alloc] initWithFrame:CGRectMake(HEAL_X(_barWith+10), -HEAL_HEIGHT(20),HEAL_WIDTH(1),HEAL_HEIGHT(_cellHeight)+HEAL_HEIGHT(40))];
line.backgroundColor = ColorWithHEAL;
[cell.contentView addSubview:line];
if (indexPath.row>=self.modelArray.count) {
return cell;
}
UIView *view = [[UIView alloc] init];
//20 填写实际数值%%%%%%%%%%%%%%%%%%%%%%%%%%
[UIView animateWithDuration:0.25 animations:^{
// NSLog(@"cptimes%@",[_modelArray[indexPath.row] cptimes]);
CGFloat height = [_modelArray[indexPath.row][@"cptimes"] floatValue]/_maxValue*HEAL_HEIGHT(100);
if (height < HEAL_HEIGHT(1)&&height>0) {
height = HEAL_HEIGHT(1);
}
view.frame =CGRectMake(CGRectGetMaxX(line.frame),HEAL_Y(10),height ,HEAL_WIDTH(_barWith));
}];
view.backgroundColor = _defaultColor;
view.tag = indexPath.row+1;
[cell.contentView addSubview:view];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, HEAL_Y(10), HEAL_HEIGHT(_cellHeight), HEAL_WIDTH(_barWith))];
label.textAlignment = NSTextAlignmentCenter;
label.font = Font_shuzi_DINCond_Medium_size(HEAL_X(15));
label.text = _modelArray[indexPath.row][@"colname"];
label.textColor = [UIColor grayColor];
[cell.contentView addSubview:label];
label.transform = CGAffineTransformMakeRotation(M_PI / 2);
return cell;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row>=self.modelArray.count) {
return ;
}
UIView *view = [self viewWithTag:indexPath.row+1];
if (self.currentView == view) {
return;
}else{
view.backgroundColor = _SelectColor;
self.currentView.backgroundColor = _defaultColor;
}
self.currentView = view;
[self.tb scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionMiddle animated:YES];
NSLog(@"点击的是%ldlabel==%@",indexPath.row,_modelArray[indexPath.row][@"colname"]);
self.SelectedWithTableViewPathRowBlock?self.SelectedWithTableViewPathRowBlock(_modelArray[indexPath.row][@"colname"],indexPath.row):nil;
}
- (void)selectedWithTableViewPathRowBlock:(SelectedWithTableViewPathRowBlock)block{
self.SelectedWithTableViewPathRowBlock = block;
}
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
if (!decelerate) {
//滑动到这里的时候 判断那个 cell的进入了中间这个区域
/*
* 在tableview 屏幕中部提取出那个 cell 的indexPath.row
*/
NSIndexPath *path = [NSIndexPath indexPathForRow:floor(scrollView.contentOffset.y/_cellHeight) inSection:0];
[self tableView:self.tb didSelectRowAtIndexPath:path];
}
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
// NSLog(@"滑动速度减为0时 的纵坐标%f",scrollView.contentOffset.y);
//round这个是四舍五入；floor这个是向下取整数 都可以的写哪个都对。
NSLog(@"%f",scrollView.contentOffset.y);
NSIndexPath *path = [NSIndexPath indexPathForRow:floor(scrollView.contentOffset.y/_cellHeight) inSection:0];
[self tableView:self.tb didSelectRowAtIndexPath:path];
}
//监听scrollView滚动
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"%f",scrollView.contentOffset.y);
}
#pragma mark -- 画进度条
- (void)drawRect:(CGRect)rect
{
}
#pragma mark - 懒加载创建图示控件
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code 当调用needdisplay方法的时候 才自动调用这个方法
}
*/
@end
//
// TableViewCell.h
// 柱状图
//
// Created by 窦心东 on 2017/2/22.
// Copyright © 2017年 窦心东. All rights reserved.
//
#import
@interface TableViewCell : UITableViewCell
/** 横坐标轴线 */
@property (nonatomic,strong) UIView *hengline;
/** 横坐标文字 */
@property (nonatomic,strong) UILabel *henglabel;
/** 柱子 */
@property (nonatomic,strong) UIView *barview;
/** 柱子高度 赋值模型之前 赋好值*/
@property (nonatomic,assign) CGFloat barheight;
@end
项目地址git仓库：Demo