说明:
公司的项目需要用到一个简单的柱状图View
,实现以下功能:
- 实时更新显示
n
列数据(n由初始化时确定)
- 将用户选中某列数据的操作通知给后台
- 可定制柱形图 仅显示正数据,仅显示负数据,显示正负数据
- Y 轴刻度可根据所显示的数据大小自动适配
网上有很多开源的柱形图框架,功能丰富样子炫酷,但大多过于庞大。公司这个完整的App
总共才5M
多,不允许使用一个4M
的柱状图的。
为避免牛刀杀鸡,我自己写了这么个BarChartView
,刚好实现了公司项目的需求。这也是我学OC以来所写的“处女View”
,写的不好,功能也极其有限,还请见谅。
使用方法:
-
拷贝以下文件到你的项目中:
BarChartView.h BarChartView.m
-
导入头文件并使用 initWithFrame: 初始化 view :
#import "BarChartView.h" //...... //...... @property(strong,nonatomic)BarChartView *barChartView; //...... //...... _barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(x,y,width,height)];
-
通过 点操作 或 设值方法 来自定义 view 的一些属性,可定义的属性如下:
self.backgroundColor; //背景色(默认:yellow) @property(nonatomic,assign)ChartType chartType; //1.Normal 2.OnlyPlus 3.OnlyMinus(默认:Normal) @property(nonatomic,strong)UIColor *columnColor; //柱子颜色(默认:gray) @property(nonatomic,strong)UIColor *columnValueColor; //柱子上/下的数值颜色(默认:black) @property(nonatomic,strong)UIColor *columnSelectedColor; //柱子在被选中状态的颜色(默认:green) @property(nonatomic,strong)UIColor *shadowButtonColor; //柱子被选中时阴影的颜色(默认:gray) @property(nonatomic,strong)UIColor *lineColor; //y刻度线的颜色(默认:gray) @property(nonatomic,strong)UIColor *xLineColor; //x轴的颜色(默认:black) @property(nonatomic,strong)UIColor *yUnitColor; //单位Label的颜色(默认:gray) @property(nonatomic,strong)UIColor *yCoordinateColor; //y刻度值的颜色(默认:gray) @property(nonatomic,strong)NSString *yUnit; //单位(默认:@“单位”) @property(nonatomic,assign)NSInteger lineNumber; //y刻度线的数量,请设置为>=3的奇数以保证x轴在中间(默认:7) @property(nonatomic,assign)NSInteger columnNumber; //柱子数量(默认:3) @property(nonatomic,strong)NSArray *yCoordinateFixed; //y轴刻度 //当且仅当 columnNumber==1 时需要自行设置, //为固定的长7的数组,依次表示从小到大的七个y刻度值,最大值即为柱状图量程 //如默认为:@[@"-60",@"-40",@"-20",@"0",@"20",@"40",@"60"]; @property(nonatomic,assign)NSInteger accuracy; //数据精度,小数点后几位(默认:1,表示1位小数) @property(nonatomic,assign)CGFloat animateDuration; //数据改变时柱子的动画时间(默认:0.7) @property(nonatomic,assign)CGFloat columnWidthScale; //柱子相对宽度比,0~1(默认:0.6) @property(nonatomic,assign,readonly)NSInteger selectedColumnIndex; //当前被选中柱子的下标,为只读属性
-
可选择实现
BarChartViewDelegate
@protocol BarChartViewDelegate <NSObject> -(void)clickedColumnAtIndex:(NSInteger)index;//当用户点击某柱数据时,将回调该方法 @end
-
调用方法将要展示的数据传给
view
进行显示-(void)sendDataValue:(CGFloat)dataValue atIndex:(NSInteger)index; //index表示柱子下标,自左向右依次为:0,1,2... //要清楚某列数据,只需调用:sendDataValue:0 atIndex:index;
有兴趣的朋友们可自行下载源码,欢迎大家提出宝贵意见。