阅读 168

ORCharts:环形图、饼状图、扇形图

本文为ORCharts:环形图、饼状图、扇形图 部分, 做详细说明

相关连接

效果预览


Ring.png

Config


安装


pod 'ORCharts/Ring'  
复制代码

使用


Use Interface Builder

1、 在XIBStoryboard拖拽一个 UIView 到你需要展示的位置 2、 修改ClassORRingChartView 3、 设置 dataSource

代码

@property (nonatomic, strong) ORRingChartView *ringChartView;
复制代码
_ringChartView = [[ORRingChartView alloc] initWithFrame:CGRectMake(0, 0, 375, 375)];
_ringChartView.dataSource = self;
[self.view addSubview:_ringChartView];
复制代码

在数据改变或是配置改变的时候reloadData

[_ringChartView reloadData];
复制代码

style


ORRingChartStyleRing:环形图(默认) ORRingChartStylePie:饼状图 ORRingChartStyleFan:扇形图

    _ringChart.style = ORRingChartStylePie;
复制代码

代理相关


ORRingChartViewDatasource

  • @required 必须实现方法,数据个数以及对应数据,类似tableView
- (NSInteger)numberOfRingsOfChartView:(ORRingChartView *)chartView;
- (CGFloat)chartView:(ORRingChartView *)chartView valueAtRingIndex:(NSInteger)index;
复制代码
  • @optional 对应Index数据视图的渐变色,默认为随机色
- (NSArray <UIColor *> *)chartView:(ORRingChartView *)chartView graidentColorsAtRingIndex:(NSInteger)index;
复制代码

对应Index数据视图的线条颜色,默认为白色

- (UIColor *)chartView:(ORRingChartView *)chartView lineColorForRingAtRingIndex:(NSInteger)index;
复制代码

对应Index数据的信息线条颜色,默认为graidentColors的第一个颜色

- (UIColor *)chartView:(ORRingChartView *)chartView lineColorForInfoLineAtRingIndex:(NSInteger)index;
复制代码

中心视图,默认nil,返回的时候需要设置视图大小

- (UIView *)viewForRingCenterOfChartView:(ORRingChartView *)chartView;
复制代码

对应Index数据的顶部信息视图,默认nil,返回的时候需要设置视图大小

- (UIView *)chartView:(ORRingChartView *)chartView viewForTopInfoAtRingIndex:(NSInteger)index;
复制代码

对应Index数据的底部信息视图,默认nil,返回的时候需要设置视图大小

- (UIView *)chartView:(ORRingChartView *)chartView viewForBottomInfoAtRingIndex:(NSInteger)index;
复制代码

配置相关


以下是配置中部分属性图解

RingChart

配置修改方式

_ringChart.config.neatInfoLine = YES;
_ringChart.config.ringLineWidth = 2;
_ringChart.config.animateDuration = 1;
[_ringChart reloadData];
复制代码

以下为配置具体说明

  • 整体 clockwise:图表绘制方向是否为顺时针,默认YES
    animateDuration:动画时长 ,设置0,则没有动画,默认1
    neatInfoLine:infoLine 两边对齐、等宽,默认NO
    startAngle:图表绘制起始角度,默认 M_PI * 3 / 2
    ringLineWidth:ringLine宽度,默认2
    infoLineWidth:infoLine宽度,默认2

  • 偏移、边距配置 minInfoInset:infoView的内容偏移,值越大,infoView越宽,默认0
    infoLineMargin:infoLine 至 周边 的距离,默认10
    infoLineInMargin:infoLine 至 环形图的距离,默认 10
    infoLineBreakMargin:infoLine折线距离,默认 15
    infoViewMargin:infoLineinfoView的距离,默认5

  • 其他 pointWidth:infoline 末尾圆点宽度,默认 5
    ringWidth:环形图,圆环宽度, 如果设置了 centerView 则无效,默认60

文末


GitHub传送门

有任何问题,可在本文下方评论,或是GitHub上提出issue 如有可取之处, 记得 star

关注下面的标签,发现更多相似文章
评论