Charts使用

Charts使用

Charts是一个开源的绘图框架，来源自Android的MPAndroidChart，是一个跨平台的框架。支持Swift和Objective-C
其具体使用文档可参考：

• mpandroidchart - 虽然是Android的文档，但用法是一样的

以下内容只是我自己的理解，参考文档内容，可能理解有误

Axis轴

参考：

• Axis (General)
• XAxis
• YAxis

在iOS中轴的基类是AxisBase，轴可以设定样式，由4个部分组成

• labels - 标签，轴的描述值
• 轴线
• 网格线 - grid-lines
• 限制线 - LimitLines

一些常用的属性
1.控制绘制

• enabled - 是否启用某个轴
• drawLabelsEnabled - 是否绘制Labels
• drawAxisLineEnabled - 是否绘制轴线
• drawGridLinesEnabled - 是否绘制网格线

2.自定轴的范围（最大值最小值）

• axisMinimum
• axisMaximum

3.样式

• labelTextColor - 标签颜色
• labelFont - 标签字体
• axisLineColor - 轴颜色
• axisLineWidth - 轴宽度
• axisLineDashPhase
• axisLineDashLengths - 轴虚线相关属性
• gridColor - 网格线颜色
• gridLineWidth - 网格线宽度

X轴

重要属性

• labelPosition - 默认为LabelPosition.top，即X轴默认是位于顶部的，可以通过设置该属性来调整X轴的位置

    @objc(XAxisLabelPosition)
    public enum LabelPosition: Int
    {
        case top
        case bottom
        case bothSided
        case topInside
        case bottomInside
    }

Y轴

Y轴要区分左轴还是右轴，默认左右轴都是启用并绘制的
例如要禁用右轴：

_chartView.rightAxis.enabled = NO;

设置数据对应的是哪个轴？

set1.axisDependency = AxisDependencyLeft;

Legend

我理解的Legend就是图的标识

获取legend

ChartLegend *l = _chartView.legend;

是否启用legend

_chartView.legend.enabled = NO;//不启用legend

一些重要的属性：

• horizontalAlignment - 水平对齐方式
• verticalAlignment - 垂直对齐方式
• orientation - 方向，是水平排列，还是竖直排列
• direction - 文字的方向
• drawInside - 是绘制的外面还里面
• font - 字体
• textColor - 文字颜色

LineChart

折线图的一些设置

在LineChartDataSet上设置颜色等

        set1 = [[LineChartDataSet alloc] initWithEntries:yVals1 label:@"正确率"];
        set1.axisDependency = AxisDependencyLeft; //对齐的轴，即使左轴还是右轴
        
        set1.lineWidth = 2.0;
        [set1 setColor:[UIColor colorWithHexString:@"15B38A"]];//线条颜色
        [set1 setValueTextColor:[UIColor colorWithHexString:@"15B38A"]];//文字颜色
        [set1 setValueFont:[UIFont systemFontOfSize:10.0f]];
        
        [set1 setCircleColor:[UIColor colorWithHexString:@"15B38A"]];//圆圈颜色
        set1.circleRadius = 4.0;//圆圈半径
        set1.drawCircleHoleEnabled = YES;//空心圆圈
        set1.circleHoleColor = [UIColor whiteColor];//空心圆的颜色
        set1.circleHoleRadius = 2.0;//空心圆的半径

        //渐变填充
        NSArray *gradientColors = @[
                                    (id)CF_COLOR_FFFFFF.CGColor,
                                    (id)[UIColor colorWithHexString:@"15B38A"].CGColor
                                    ];
        CGGradientRef gradient = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
        set1.fillAlpha = 0.2;
        set1.fill = [ChartFill fillWithLinearGradient:gradient angle:90.f];
        //set1.fillColor = [UIColor colorWithHexString:@"15B38A"];
        set1.drawFilledEnabled = YES;

通过mode设置线条的模式

set.mode = LineChartModeLinear; //模式

可用模式包括：

typedef SWIFT_ENUM_NAMED(NSInteger, LineChartMode, "Mode", closed) {
  LineChartModeLinear = 0,
  LineChartModeStepped = 1,
  LineChartModeCubicBezier = 2,
  LineChartModeHorizontalBezier = 3,
};

ValueFormatter

使用valueFormatter可以自定义格式化轴的value，例如显示百分比等，如下的例子：

自定义Y轴的ValueFormatter类如下：

//Y轴坐标字符串
@interface OEExamCaseAssertChartViewYValueFormatter : NSObject <IChartAxisValueFormatter>

@end

@implementation OEExamCaseAssertChartViewYValueFormatter

- (id)init {
    self = [super init];
    if (self) {
        
    }
    return self;
}

- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis {
    NSInteger valueInt = (NSInteger)value;
    if (valueInt == 0) {
        return @"0";
    } else {
        return [NSString stringWithFormat:@"%ld%%", (long)valueInt];
    }
}

@end

设置valueFormatter

leftAxis.valueFormatter = [[OEExamCaseAssertChartViewYValueFormatter alloc] init];