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
