【iOS开发】 关于Charts框架第二期：平滑折线图，X轴显示自定义

之前写了一期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 
#import 

NS_ASSUME_NONNULL_BEGIN

@interface LWOtherDataXAxisFormatter : NSObject

@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。

对你有帮助的话，记得点个哦~