您的位置:首页 > 其它

折线图柱状图封装

2017-03-17 13:04 176 查看
github链接:
https://github.com/LearnMoreAndBetter/RMChartTest
实现功能:

1. 实现折线图显示

2. 实现柱状图显示

3. 折线图循环滚动的封装

4. 折线图圆圈按钮点击显示浮层

5. 可手动控制是否显示折线和渐变色和按钮

6. 可手动选择画柱状线条还是画举行渐变条

7. 添加动画

代码注释详细,可直接看代码。

1. 数据初始化,可根据实际情况作出修改

NSArray *array1 = @[@{@"dateTime":@"01/01", @"value" : @"1"},
                        @{@"dateTime":@"01/02", @"value" : @"4"},
                        @{@"dateTime":@"01/03", @"value" : @"1"},
                        @{@"dateTime":@"01/04", @"value" : @"5"},
                        @{@"dateTime":@"01/05", @"value" : @"16"},
                        @{@"dateTime":@"01/06", @"value" : @"12"},
                        @{@"dateTime":@"01/07", @"value" : @"20"},
                        @{@"dateTime":@"01/08", @"value" : @"2"}];
 NSMutableArray *dataList1 = [NSMutableArray array];
 for (NSDictionary *dic in array1) {
     RMChartModel *model = [RMChartModel initModelWithData:dic];
    [dataList1 addObject:model];
 }

2. 循环滚动的数据初始化

NSArray *scrollLineArray =@[@{@"title" :@"图一",
                                    @"list" : dataList1},
                                @{@"title" :@"图二",
                                    @"list" : dataList2},
                                @{@"title" :@"图三",
                                    @"list" : dataList3},
                                @{@"title" :@"图四",
                                    @"list" : dataList4},
                                @{@"title" :@"图五",
                                    @"list" : dataList5}
                                               
];

3. 折线图调用

RMLineChartView *lineChartView = [[RMLineChartView alloc]initWithFrame:CGRectMake(0, 100, APP_SCREEN_WIDTH, 200)];
lineChartView.dataLists = dataList1;
[self.view addSubview:lineChartView];

4. 柱状图调用

RMBarChartView *barChartView = [[RMBarChartViewalloc]initWithFrame:CGRectMake(0,400,APP_SCREEN_WIDTH,200)];
    barChartView.dataLists = dataList1;
    [self.viewaddSubview:barChartView];

5. 折线循环滚动加标题的调用

RMLineChartScrollView *lineChartScrollView = [[RMLineChartScrollViewalloc]initWithFrame:CGRectMake(0,50,APP_SCREEN_WIDTH,250)];
lineChartScrollView.dataLists = scrollLineArray;
[self.viewaddSubview:lineChartScrollView];

6. 可手动控制是否显示折线和渐变色和按钮

- (void)drawRect:(CGRect)rect {
    // Drawing code
    [selfdrawRulerLine];
    [selfdrawText];
    [self drawFoldLine];//画折线
    [selfdrawGradientLayer];//画渐变色
    [selfdrawLineButton];//画拐点button
}

7. 可手动选择画柱状线条还是画举行渐变条

- (void)drawRect:(CGRect)rect {
    // Drawing code
    [selfdrawRulerLine];
    [selfdrawText];
    [selfdrawBarGraph];//画柱状线条
    //[self drawGradientLayer];//画矩形渐变条
}

废话不多说直接上效果图





内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: