1.Charts源碼分析
1.1 文件組結(jié)構(gòu)
QQ20171114-110302@2x.png
1.2 ChartView類型圖表簡析
BarLineChartViewBase與PieRadarChartViewBase共同點(diǎn)為均有橫坐標(biāo)xAxis區(qū)別在于BarLineChartViewBase有YAlxis縱坐標(biāo)
image.png
1.3 數(shù)據(jù)源
ChartDataEntry組成ChartDataSet,多組ChartDataSet構(gòu)成ChartData涮阔。
1.4 渲染繪制過程
設(shè)置了chartView的data之后，在set方法里調(diào)用dataChanged的通知notifyDataSetChanged()望浩，這個(gè)方法的具體實(shí)現(xiàn)是在每個(gè)子類的ChartView中自己實(shí)現(xiàn)译打，主要做的事情是：
1> 重新計(jì)算邊界值和offset偏移值
2> 調(diào)用setNeedsDisplay(),觸發(fā)視圖界面的刷新
3> 在ChartView的幾類和子類的drawRect方法中進(jìn)行界面渲染：
i>. 獲取當(dāng)前的CGContext
ii>. 繪制橫縱坐標(biāo)軸
iii>. 繪制數(shù)據(jù)（我們提供的數(shù)據(jù)源）
iv>. 繪制額外的補(bǔ)充數(shù)據(jù)
v>. 繪制圖例（實(shí)際場景中餅圖必須潮模，其他圖按需）
vi>. 繪制description（描述語）
2.使用場景
使用Charts框架可以實(shí)現(xiàn)折線圖、柱形圖、折線圖俭厚、散點(diǎn)圖世吨、餅圖等澡刹，較常用的為折線圖、柱形圖耘婚。
3.基本用法 以柱狀圖為例
3.1 創(chuàng)建ChartView表格
self.barChartView = [[BarChartView alloc] initWithFrame:CGRectMake(10, 300, self.view.frame.size.width - 20, 158)];
self.barChartView.delegate = self;//設(shè)置代理
[self.view addSubview:self.barChartView];
3.2 基本樣式 （按需設(shè)置）
self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.barChartView.noDataText = @"暫無數(shù)據(jù)";//沒有數(shù)據(jù)時(shí)的文字提示
self.barChartView.drawValueAboveBarEnabled = YES;//數(shù)值顯示在柱形的上面還是下面
self.barChartView.drawBarShadowEnabled = NO;//是否繪制柱形的陰影背景
self.barChartView.rightAxis.enabled = NO;//不繪制右邊軸
self.barChartView.leftAxis.enabled = NO;//不繪制左邊軸
self.barChartView.xAxis.enabled = NO;//不繪制X軸
self.barChartView.legend.enabled = NO;//不顯示圖例說明
self.barChartView.descriptionText = @"";//右下角的description文字樣式不顯示罢浇，就設(shè)為空字符串即
/*
//X軸樣式
ChartXAxis *xAxis = self.barChartView.xAxis;
xAxis.axisLineWidth = 1;//設(shè)置X軸線寬
xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置，默認(rèn)是顯示在上面的
xAxis.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線
xAxis.labelTextColor = [UIColor brownColor];//label文字顏色
//左邊Y軸樣式
ChartYAxis *leftAxis = self.barChartView.leftAxis;//獲取左邊Y軸
leftAxis.labelCount = 5;//Y軸label數(shù)量，數(shù)值不一定嚷闭，如果forceLabelsEnabled等于YES, 則強(qiáng)制繪制制定數(shù)量的label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO;//不強(qiáng)制繪制制定數(shù)量的label
leftAxis.axisMaxValue = 105;//設(shè)置Y軸的最大值
leftAxis.inverted = NO;//是否將Y軸進(jìn)行上下翻轉(zhuǎn)
leftAxis.axisLineWidth = 0.5;//Y軸線寬
leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置
leftAxis.labelTextColor = [UIColor brownColor];//文字顏色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字體
//網(wǎng)格線樣式
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色
leftAxis.gridAntialiasEnabled = YES;//開啟抗鋸齒
//添加限制線
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制線"];
limitLine.lineWidth = 2;
limitLine.lineColor = [UIColor greenColor];
limitLine.lineDashLengths = @[@5.0f, @5.0f];//虛線樣式
limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置
[leftAxis addLimitLine:limitLine];//添加到Y(jié)軸上
leftAxis.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在柱形圖的后面
*/
3.3 交互設(shè)置
self.barChartView.scaleYEnabled = NO;//取消Y軸縮放
self.barChartView.doubleTapToZoomEnabled = NO;//取消雙擊縮放
self.barChartView.dragEnabled = YES;//啟用拖拽圖表
self.barChartView.dragDecelerationEnabled = YES;//拖拽后是否有慣性效果
self.barChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后慣性效果的摩擦系數(shù)(0~1)攒岛，數(shù)值越小，慣性越不明顯
[self.barChartView setVisibleXRangeMinimum:10.f];//設(shè)置只滑動(dòng) 不縮放 (系統(tǒng)內(nèi)部默認(rèn)是先縮放后滑動(dòng))
[self.barChartView setVisibleXRangeMaximum:10.f];
3.4 設(shè)置動(dòng)畫效果
[self.barChartView animateWithYAxisDuration:1.5f];//可以設(shè)置X軸和Y軸的動(dòng)畫效果
3.5 表格數(shù)據(jù)設(shè)置
//為柱形圖設(shè)置數(shù)據(jù)
- (BarChartData *)setData{
int xVals_count = 18;//X軸上要顯示多少條數(shù)據(jù)
//X軸上面需要顯示的數(shù)據(jù)
NSMutableArray *xVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
[xVals addObject:[NSString stringWithFormat:@"%d月", i+1]];
}
//對應(yīng)Y軸上面需要顯示的數(shù)據(jù)
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
double val = 20+i>32?32:20+i;
BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:val];
[yVals addObject:entry];
}
//創(chuàng)建BarChartDataSet對象胞锰，其中包含有Y軸數(shù)據(jù)信息灾锯，以及可以設(shè)置柱形樣式
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:nil];
set1.drawValuesEnabled = YES;//是否在柱形圖上面顯示數(shù)值
set1.highlightEnabled = NO;//點(diǎn)擊選中柱形圖是否有高亮效果，（雙擊空白處取消選中）
[set1 setColors:ChartColorTemplates.material];//設(shè)置柱形圖顏色
set1.drawValuesEnabled = YES;//是否填充顏色
//將BarChartDataSet對象放入數(shù)組中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
//創(chuàng)建BarChartData對象, 此對象就是barChartView需要最終數(shù)據(jù)對象
BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
[data setValueTextColor:[UIColor orangeColor]];//文字顏色
data.barWidth = 0.6;//總共為1 數(shù)值越大柱狀條的寬度越大
return data;
}
//為柱形圖提供數(shù)據(jù)
self.barChartView.data = [self setData];
3.6 常用代理事件
#pragma mark - ChartViewDelegate
//點(diǎn)擊選中柱形時(shí)回調(diào)
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry dataSetIndex:(NSInteger)dataSetIndex highlight:(ChartHighlight * _Nonnull)highlight{
}
//沒有選中柱形圖時(shí)回調(diào)嗅榕，當(dāng)選中一個(gè)柱形圖后顺饮，在空白處雙擊，就可以取消選擇誊册，此時(shí)會回調(diào)此方法
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView{
NSLog(@"---chartValueNothingSelected---");
}
//放大圖表時(shí)回調(diào)
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
// NSLog(@"---chartScaled---scaleX:%g, scaleY:%g", scaleX, scaleY);
}
//拖拽圖表時(shí)回調(diào)
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
// NSLog(@"---chartTranslated---dX:%g, dY:%g", dX, dY);
}
3.7 數(shù)據(jù)改變時(shí) 刷新數(shù)據(jù)
-(void)updateData{
//數(shù)據(jù)改變時(shí)领突，刷新數(shù)據(jù)
self.data = [self setData];
self.barChartView.data = self.data;
[self.barChartView notifyDataSetChanged];
}
4.使用注意事項(xiàng)
1> y軸顯示默認(rèn)為double類型，需要自定義的案怯，比如需要顯示為9%君旦，此時(shí)需要去自定義一個(gè)類遵循<IChartAxisValueFormatter>的協(xié)議來完成
2> 未提供方法設(shè)置柱狀圖的圓角，需要自行修改三方庫文件drawDataSet方法嘲碱，可參照如下https://github.com/danielgindi/Charts/issues/1066
5.參考資料
【Charts開源庫鏈接】 https://github.com/danielgindi/Charts
【Charts源碼解讀】http://www.reibang.com/p/b183ff57df01
