ORCharts:曲线图、折线图
本文为ORCharts:曲线图、折线图 部分， 做详细说明
相关连接
效果预览
| Slider | Control |
|---|---|
 |
 |
| config |
|---|
 |
安装
pod 'ORCharts/Line'
使用
Use Interface Builder
1、 在XIB或Storyboard拖拽一个 UIView 到你需要展示的位置
2、 修改Class为 ORLineChartView
3、 设置 dataSource 和 delegate
代码
@property (nonatomic, strong) ORLineChartView *lineChartView;
_lineChartView = [[ORLineChartView alloc] initWithFrame:CGRectMake(0, 0, 375, 350)];
_lineChartView.dataSource = self;
_lineChartView.delegate = self;
[self.view addSubview:_lineChartView];
在数据改变或是配置改变的时候reloadData
[_lineChartView reloadData];
代理相关
ORLineChartViewDataSource
-
@required
必须实现方法，数据个数以及对应数据，类似tableView
- (NSInteger)numberOfHorizontalDataOfChartView:(ORLineChartView *)chartView;
- (CGFloat)chartView:(ORLineChartView *)chartView valueForHorizontalAtIndex:(NSInteger)index;
-
@optional
垂直方向上的线条（左边label）条数，默认5
此处决定垂直区间（左边数据）的划分
- (NSInteger)numberOfVerticalLinesOfChartView:(ORLineChartView *)chartView;
自定义垂直方向上的值， 不实现此方法，则是 自动 划分数据
- (CGFloat)chartView:(ORLineChartView *)chartView valueOfVerticalSeparateAtIndex:(NSInteger)index;
底部对应数据的标题，默认近期日期：MM-dd
- (NSString *)chartView:(ORLineChartView *)chartView titleForHorizontalAtIndex:(NSInteger)index;
底部富文本属性设置
- (NSDictionary<NSAttributedStringKey,id> *)labelAttrbutesForHorizontalOfChartView:(ORLineChartView *)chartView;
左侧富文本属性设置
- (NSAttributedString *)chartView:(ORLineChartView *)chartView attributedStringForIndicaterAtIndex:(NSInteger)index;
指示器对应数据的富文本，默认为当前数据
- (NSString *)chartView:(ORLineChartView *)chartView titleForHorizontalAtIndex:(NSInteger)index;
ORLineChartViewDelegate
-
@optional
style == ORLineChartStyleControl点击按钮触发
- (void)chartView:(ORLineChartView *)chartView didSelectValueAtIndex:(NSInteger)index;
style == ORLineChartStyleSlider 指示器值发生变化的时候触发
- (void)chartView:(ORLineChartView *)chartView indicatorDidChangeValueAtIndex:(NSInteger)index;
配置相关
以下是配置中部分属性图解
LineChart
配置修改方式
_lineChart.config.style = ORLineChartStyleSlider;
_lineChart.config.isBreakLine = YES;
_lineChart.config.chartLineWidth = 2;
_lineChart.config.animateDuration = 1;
[_lineChart reloadData];
以下为配置具体说明
- style
ORLineChartStyleSlider：指示器随拖拽显示（默认）
ORLineChartStyleControl：指示器由点击控制 - 线条
chartLineWidth：chartLine,shadowLine宽度，默认3
bglineWidth：背景网格线宽度，默认1
chartLineColor：chartLine颜色，默认orange
shadowLineColor：shadowLine颜色，默认lightGray alpha 0.5
bgLineColor：背景网格线颜色，默认lightGray alpha 0.5 - 整体
gradientColors：渐变色，默认red alpha 0.3和blue alpha 0.3
bottomInset：底部边距，默认10
topInset：顶部边距，默认0
contentMargin：表格内容左右两边偏移边距(ScrollView ContentInset)，默认10
leftWidth：左边labels视图宽度，默认40
bottomLabelWidth：底部单个label视图宽度，默认50
bottomLabelInset：底部label视图距离表格主体边距，默认10 - 展示
showShadowLine：是否显示shadowLine，默认YES
showVerticalBgline：是否显示纵向背景线，默认YES
showHorizontalBgline：是否显示横向背景线，默认YES
dottedBGLine：背景线是否为虚线，默认YES
isBreakLine：chartLine、shadowLine是否为折线，默认NO - 指示器
indicatorContentInset：指示器内容边距，默认7
indicatorCircleWidth：指示器圆圈或ORLineChartStyleControl下的按钮大小，默认13
indicatorLineWidth：指示器线条宽度，默认0.8
indicatorTintColor：指示器主题颜色，默认chartLineColor
indicatorLineColor：指示器线条颜色，默认chartLineColor
indicatorControlImage：ORLineChartStyleControl下按钮图片，默认nil
indicatorControlSelectedImage：ORLineChartStyleControl下按钮选中图片，默认nil - 其他
动画时长：如果为0则不做动画，默认0
文末
GitHub传送门
有任何问题，可在本文下方评论，或是GitHub上提出issue
如有可取之处， 记得 star
