iOS - ORCharts:曲线图、折线图

#ORCharts:曲线图、折线图

本文为ORCharts:曲线图、折线图 部分， 作详细说明

相关链接

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

效果预览

---

Slider	Control

config

安装

---

pod 'ORCharts/Line'  
复制代码

使用

---

Use Interface Builder

一、 在XIB或Storyboard拖拽一个 UIView 到你须要展现的位置 二、 修改Class为 ORLineChartView 三、 设置 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;
复制代码

底部对应数据的标题，默认近期日期：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.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