之前寫了一期Charts框架的集成以及折線圖的簡單實(shí)現(xiàn)士败，需要的看這里傳送門
那么最近又需要繪圖， 所以來更新下最新的使用褥伴。
Charts框架最新版本是v3.4.0, 從v3.0版本開始谅将， 有了一些重大更改，摘錄了一部分在下面：
x索引已失效重慢。引誘：x值〖⒈郏現(xiàn)在，每個(gè)條目都有一個(gè)x和一個(gè)y似踱。
餅圖/雷達(dá)圖不再具有X索引的概念
統(tǒng)一的XAxis / YAxis功能和經(jīng)驗(yàn)隅熙。
軸的統(tǒng)一格式器接口。
用于y值的新格式化程序核芽，不再從NSNumberFormatter繼承囚戚，以具有dataSet和視口信息以做出更好的格式化決策。
所有數(shù)據(jù)集構(gòu)造函數(shù)都已更改-它們不再采用x索引數(shù)組轧简。
所有條目構(gòu)造函數(shù)均已更改-它們采用X和Y驰坊。
其實(shí)對我們影響更大的部分是一些類方法需要替換，比如：用[[LineChartDataSet alloc]initWithEntries:yVals label:nil]; 替換[[LineChartDataSet alloc]initWithValues:yVals label:nil];
所以下面重新梳理一下折線圖的繪制哮独，注解會更詳細(xì)：
- 創(chuàng)建LineChartView
- (LineChartView *)lineChartView
{
if (!_lineChartView)
{
_lineChartView = [[LineChartView alloc] init];
_lineChartView.backgroundColor = [UIColor clearColor];
_lineChartView.delegate = self;
// 設(shè)置間隙
[_lineChartView setExtraOffsetsWithLeft:0 top:20 right:0 bottom:10];
// 關(guān)于圖表的描述
_lineChartView.noDataText = @"暫無數(shù)據(jù)";
_lineChartView.chartDescription.enabled = YES;
// 關(guān)閉圖例顯示
_lineChartView.legend.enabled = NO;
// x/y軸是否支持拖拽
_lineChartView.scaleYEnabled = YES;
_lineChartView.scaleXEnabled = YES;
// 是否支持雙擊縮放
_lineChartView.doubleTapToZoomEnabled = NO;
// 啟用拖拽
_lineChartView.dragEnabled = NO;
// 展現(xiàn)動畫
[_lineChartView animateWithYAxisDuration:0.75f];
// Y軸設(shè)置
ChartYAxis *leftAxis = _lineChartView.leftAxis;
leftAxis.enabled = YES;
leftAxis.axisLineColor = [UIColor clearColor]; // Y軸顏色
leftAxis.labelFont = SystemFontSize(10);
leftAxis.labelTextColor = UIColorFromHEXA(0xFFFFFF, 0.6);
leftAxis.gridColor = UIColorFromHEXA(0xffffff, 0.6); // 網(wǎng)格線顏色
leftAxis.granularityEnabled = NO; // 是否開啟j抗鋸齒拳芙，默認(rèn)打開
leftAxis.drawZeroLineEnabled = YES; // 繪制零線
leftAxis.zeroLineColor = [UIColor blueColor];
[leftAxis setXOffset:15.0f];
leftAxis.labelCount = 6; // 強(qiáng)制固定label個(gè)數(shù)
leftAxis.forceLabelsEnabled = YES;
_lineChartView.rightAxis.enabled = NO; // 不繪制右邊軸
// X軸設(shè)置
ChartXAxis *xAxis = _lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 設(shè)置x軸數(shù)據(jù)在底部
xAxis.axisLineColor = [UIColor clearColor];
xAxis.labelFont = SystemFontSize(10);
xAxis.labelTextColor = UIColorFromHEXA(0xFFFFFF, 0.6);
xAxis.gridColor = [UIColor clearColor];
xAxis.avoidFirstLastClippingEnabled = YES;
[xAxis setYOffset:15.0f];
xAxis.labelCount = 6; // 強(qiáng)制固定label個(gè)數(shù)
xAxis.forceLabelsEnabled = YES;
xAxis.valueFormatter = [[LWOtherDataXAxisFormatter alloc] init];
}
return _lineChartView;
}
- 顯示數(shù)據(jù)處理
- (void)setLineChartWithXData:(NSArray *)xData yData:(NSArray *)yData
{
if (xData.count > 0)
{
//對應(yīng)Y軸上面需要顯示的數(shù)據(jù)
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < yData.count; i++) {
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:[xData[i] doubleValue] y:[yData[i] doubleValue]];
[yVals addObject:entry];
}
LineChartDataSet *set1 = [[LineChartDataSet alloc]initWithEntries:yVals label:nil];
// 折線寬度
set1.lineWidth = 3.0f;
// 折線顏色
[set1 setColor:UIColorFromHEXA(0xFFD14F, 1.0)];
// 折線模式
set1.mode = LineChartModeCubicBezier;
// 是否填充顏色
set1.drawFilledEnabled = YES;
// 是否繪制拐點(diǎn)
set1.drawCirclesEnabled = NO;
// 是否在拐點(diǎn)處顯示數(shù)據(jù)
set1.drawValuesEnabled = NO;
// 拐點(diǎn)圓設(shè)置
set1.circleRadius = 7.0f; // 半徑
set1.circleColors = @[WhiteColor]; // 圓圈顏色
set1.circleHoleColor = UIColorFromHEXA(0xFFD14F, 1.0); // 圓圈孔中間顏色
set1.circleHoleRadius = 2.5f; // 圓圈孔半徑
LineChartData *data = [[LineChartData alloc]initWithDataSet:set1];
_lineChartView.data = data;
}
}
基本這些已經(jīng)夠我們繪制一個(gè)好看，平滑且有背景遮罩的折線圖了皮璧。
但是我根據(jù)需求處理的時(shí)候發(fā)現(xiàn)了一個(gè)問題舟扎， 服務(wù)器返回的數(shù)據(jù)， x軸的時(shí)間點(diǎn)是“8:30”這種格式悴务， 在進(jìn)行doubleValue轉(zhuǎn)變后睹限，X軸的值就變成了“8.00”，導(dǎo)致8:00 和 8:30 都顯示為8.00
所以這里就需要我們引入?yún)f(xié)議IChartAxisValueFormatter：
聲明一個(gè)NSObject類，讓其遵循IChartAxisValueFormatter協(xié)議邦泄，重寫-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法删窒，然后設(shè)置X軸的valueFormatter，即xAxis.valueFormatter顺囊。
#import <Foundation/Foundation.h>
#import <Charts/Charts-Swift.h>
NS_ASSUME_NONNULL_BEGIN
@interface LWOtherDataXAxisFormatter : NSObject<IChartAxisValueFormatter>
@end
NS_ASSUME_NONNULL_END
#import "LWOtherDataXAxisFormatter.h"
@implementation LWOtherDataXAxisFormatter
- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis{
NSDate *date = [NSDate dateWithTimeIntervalSinceNow:value];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"HH:mm"];
NSString *strDate = [dateFormatter stringFromDate:date];
return strDate;
}
@end
這里重寫stringForValue 方法時(shí)， 根據(jù)自己需求蕉拢，自行處理即可特碳。
使用：
ChartXAxis *xAxis = _lineChartView.xAxis;
xAxis.valueFormatter = [[LWOtherDataXAxisFormatter alloc] init];
這樣就ok了。
關(guān)于指示器maskView晕换，是完全可以自定義的午乓，ChartMarkerView添加一個(gè)子視圖即可：
ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
MaskView *masker = [[MaskView alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
[makerView addSubview:masker];
視圖是否支持顯示指示器：chartView.drawMarkers = YES;
最后寫一下ChartViewDelegate，常用的代理也就是第一個(gè)：
- (void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight
{
NSLog(@"數(shù)值被選中闸准，可更新指示器顯示, maskView可以自定義");
}
- (void)chartValueNothingSelected:(ChartViewBase *)chartView{
NSLog(@"空白區(qū)域被選中");
}
- (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
NSLog(@"視圖被縮放");
}
- (void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
NSLog(@"視圖被移動");
}
以上益愈， End。
對你有幫助的話夷家，記得點(diǎn)個(gè)??哦~
