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