iOS - ORCharts:曲线图、折线图

2,234 阅读2分钟

#ORCharts:曲线图、折线图

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

相关连接

效果预览


Slider Control
config

安装


pod 'ORCharts/Line'  

使用


Use Interface Builder

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

代码

@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

配置修改方式

_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.3blue 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:chartLineshadowLine是否为折线,默认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