之前写了一期Charts框架的集成以及折线图的简单实现，需要的看这里传送门
那么最近又需要绘图， 所以来更新下最新的使用。
Charts框架最新版本是v3.4.0, 从v3.0版本开始， 有了一些重大更改，摘录了一部分在下面：
x索引已失效。引诱：x值。现在，每个条目都有一个x和一个y。
饼图/雷达图不再具有X索引的概念
统一的XAxis / YAxis功能和经验。
轴的统一格式器接口。
用于y值的新格式化程序，不再从NSNumberFormatter继承，以具有dataSet和视口信息以做出更好的格式化决策。
所有数据集构造函数都已更改-它们不再采用x索引数组。
所有条目构造函数均已更改-它们采用X和Y。
其实对我们影响更大的部分是一些类方法需要替换，比如：用[[LineChartDataSet alloc]initWithEntries:yVals label:nil]; 替换[[LineChartDataSet alloc]initWithValues:yVals label:nil];
所以下面重新梳理一下折线图的绘制，注解会更详细：
- 创建LineChartView
- (LineChartView *)lineChartView
{
if (!_lineChartView)
{
_lineChartView = [[LineChartView alloc] init];
_lineChartView.backgroundColor = [UIColor clearColor];
_lineChartView.delegate = self;
// 设置间隙
[_lineChartView setExtraOffsetsWithLeft:0 top:20 right:0 bottom:10];
// 关于图表的描述
_lineChartView.noDataText = @"暂无数据";
_lineChartView.chartDescription.enabled = YES;
// 关闭图例显示
_lineChartView.legend.enabled = NO;
// x/y轴是否支持拖拽
_lineChartView.scaleYEnabled = YES;
_lineChartView.scaleXEnabled = YES;
// 是否支持双击缩放
_lineChartView.doubleTapToZoomEnabled = NO;
// 启用拖拽
_lineChartView.dragEnabled = NO;
// 展现动画
[_lineChartView animateWithYAxisDuration:0.75f];
// Y轴设置
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); // 网格线颜色
leftAxis.granularityEnabled = NO; // 是否开启j抗锯齿，默认打开
leftAxis.drawZeroLineEnabled = YES; // 绘制零线
leftAxis.zeroLineColor = [UIColor blueColor];
[leftAxis setXOffset:15.0f];
leftAxis.labelCount = 6; // 强制固定label个数
leftAxis.forceLabelsEnabled = YES;
_lineChartView.rightAxis.enabled = NO; // 不绘制右边轴
// X轴设置
ChartXAxis *xAxis = _lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 设置x轴数据在底部
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; // 强制固定label个数
xAxis.forceLabelsEnabled = YES;
xAxis.valueFormatter = [[LWOtherDataXAxisFormatter alloc] init];
}
return _lineChartView;
}
- 显示数据处理
- (void)setLineChartWithXData:(NSArray *)xData yData:(NSArray *)yData
{
if (xData.count > 0)
{
//对应Y轴上面需要显示的数据
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;
// 是否绘制拐点
set1.drawCirclesEnabled = NO;
// 是否在拐点处显示数据
set1.drawValuesEnabled = NO;
// 拐点圆设置
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;
}
}
基本这些已经够我们绘制一个好看，平滑且有背景遮罩的折线图了。
但是我根据需求处理的时候发现了一个问题， 服务器返回的数据， x轴的时间点是“8:30”这种格式， 在进行doubleValue转变后，X轴的值就变成了“8.00”，导致8:00 和 8:30 都显示为8.00
所以这里就需要我们引入协议IChartAxisValueFormatter：
声明一个NSObject类，让其遵循IChartAxisValueFormatter协议，重写-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法，然后设置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 方法时， 根据自己需求，自行处理即可。
使用：
ChartXAxis *xAxis = _lineChartView.xAxis;
xAxis.valueFormatter = [[LWOtherDataXAxisFormatter alloc] init];
这样就ok了。
关于指示器maskView，是完全可以自定义的，ChartMarkerView添加一个子视图即可：
ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
MaskView *masker = [[MaskView alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
[makerView addSubview:masker];
视图是否支持显示指示器：chartView.drawMarkers = YES;
最后写一下ChartViewDelegate，常用的代理也就是第一个：
- (void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight
{
NSLog(@"数值被选中，可更新指示器显示, maskView可以自定义");
}
- (void)chartValueNothingSelected:(ChartViewBase *)chartView{
NSLog(@"空白区域被选中");
}
- (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
NSLog(@"视图被缩放");
}
- (void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
NSLog(@"视图被移动");
}
以上， End。
对你有帮助的话，记得点个👍哦~
