iOS YHChart 折線圖柱狀圖餅圖

YHChart 是使用Objective-C語言編寫，目前支持折線圖柱狀圖餅圖三種圖表

實(shí)現(xiàn)方式

主要基于原生CAShareLayer 和 UIBezierPath 結(jié)合畫線

坐標(biāo)軸支持

平面上四個(gè)頂點(diǎn)為坐標(biāo)系的坐標(biāo)軸
標(biāo)題使用AttributeString來控制顯示纵竖，支持格式化控制
坐標(biāo)軸顯示寬度控制
坐標(biāo)軸顯示位置控制顯示在軸內(nèi)部還是外部
支持雙Y軸
坐標(biāo)軸刻度設(shè)置
- 通過給定固定刻度值數(shù)值設(shè)置
- 通過給定數(shù)據(jù)的值來自動設(shè)置坐標(biāo)軸信息
坐標(biāo)軸按刻度設(shè)置
- 按數(shù)值根據(jù)具體的數(shù)值來定位刻度的位置
- 不按數(shù)值等分坐標(biāo)軸比如指數(shù)坐標(biāo)軸

折線圖支持

平滑控制曲線還是折線
可虛線
可陰影
左右自動平移動畫
多條
折線點(diǎn)信息
選中點(diǎn)視圖信息
屏幕旋轉(zhuǎn)適配
添加刪除更新

柱狀圖支持

多條水平平分布局
多條垂直疊加布局
添加刪除更新

餅圖

添加刪除
內(nèi)圓
標(biāo)注

示例：

折線圖-簡單

折線圖-平移動畫

折線圖-添加更新刪除

折線圖-右上坐標(biāo)軸

折線圖-對數(shù)坐標(biāo)軸

折線圖-雙Y軸

柱狀圖-簡單

柱狀圖-多條水平布局

柱狀圖-多條垂直布局

柱狀圖+折線圖

餅圖-簡單

餅圖-有內(nèi)圓

代碼示例

坐標(biāo)軸

方式1：
    NSArray * list = @[@"7.59",@"7.5",@"7.4",@"7.3",@"7.2",@"7.1",@"7.0"];
    for(NSString * str in list){
        [scaleList addObject:[YHScaleItem att:YHVTitle(str) value:str.floatValue]];
    }
    [chartView2 updateAxisScaleList:scaleList width:40 position:(YHChartAxisPos_Left) dirction:(YHChartAxisDirection_BottomToTop) config:^(YHAxisElementInfo * _Nonnull axisInfo) {
        axisInfo.maxValue = 7.6;
        axisInfo.minValue = 7;
    }];

方式2：
    NSMutableArray * pointList = [NSMutableArray new];
    for(NSInteger i = 0; i < 11; i++){
        [pointList addObject:[YHLinePointItem valueX:i valueY:(i*4)%11]];
    }
    [chartView updateAxisAutoScaleCount:20
                              pointList:pointList
                                 format:[YHFormatDebug9 new]
                                  width:40
                               position:YHChartAxisPos_Bottom
                               dirction:YHChartAxisDirection_LeftToRight
                                 config:nil];

方式3：
不顯示坐標(biāo)軸
    chartView1.axisInfo.axisPos(YHChartAxisPos_Bottom).maxValue = 50;
    chartView1.axisInfo.axisPos(YHChartAxisPos_Left).maxValue = 50;

方式4：
平分坐標(biāo)軸刻度 指數(shù)軸
[chartView updateAxisScaleList:scaleList width:30 position:(YHChartAxisPos_Left) dirction:(YHChartAxisDirection_BottomToTop) config:^(YHAxisElementInfo * _Nonnull axisInfo) {
        axisInfo.isDeuceByScale = YES; 
        axisInfo.maxValue = 1000;
        axisInfo.minValue = 0.01;
    }];

參考線

四邊坐標(biāo)軸線條：
[chartView addReflineAxisPosition:0xff width:1 color:[UIColor yh_separator] dotted:NO];

坐標(biāo)軸刻度對應(yīng)的參考線：
    [chartView addReflineAllAxisPos:YHChartAxisPos_Left config:^(YHReflineInfo * _Nonnull refline) {
        refline.lineColor = [UIColor yh_separator];
        refline.lineHeight = 1;
    }];
    [chartView addReflineAllAxisPos:(YHChartAxisPos_Bottom) config:^(YHReflineInfo * _Nonnull refline) {
        refline.lineColor = [UIColor yh_separator];
        refline.lineHeight = 1;
    }];

自定義位置添加參考線：
    [chartView3 addReflineConfig:^(YHReflineInfo * _Nonnull refline) {
        refline.showHorizontal = YES;
        refline.axisYValue = 30;
    }];

折線實(shí)例

    YHLineChartItem * item = [YHLineChartItem new];
    item.coordInfoViewShow = YES; 顯示點(diǎn)坐標(biāo)數(shù)據(jù)信息
    item.lineColor = [UIColor yh_blue]; 折線顏色
    item.lineShowShadow = YES; 折線陰影
    item.lineShadowColorTop = [[UIColor yh_blue]  colorWithAlphaComponent:0.8]; 漸變開始顏色
    item.lineShadowColorBottom = [[UIColor yh_blue] colorWithAlphaComponent:0.1]; 漸變結(jié)束顏色
    item.pointFillColor = [UIColor whiteColor]; 折線點(diǎn) 填充色
    item.pointLineColor = [UIColor yh_blue]; 折線點(diǎn) 描邊色
    item.pointLineWidth = 1; 折線點(diǎn) 描邊大小
    item.pointRadius = 3; 折線點(diǎn) 圓點(diǎn)大小
    item.pointPicker.showReflineVertical = YES; 折線點(diǎn) 選中顯示垂直參考線
    item.pointPicker.showReflineHorizontal = YES; 折線點(diǎn) 選中顯示水平參考線
    item.pointPicker.canSelect = YES; 折線點(diǎn) 可選中
    item.pointPicker.radius = 4; 折線點(diǎn) 選中之后點(diǎn)的顏色
    item.pointPicker.fillColor = [UIColor yh_blue];
    item.pointPicker.lineWidth = 0;
  折線點(diǎn) 可選Toast提示視圖
    [item.pointPicker setToastViewBlock:^UIView * _Nonnull(YHLinePointItem * _Nonnull passPoint) {
        YHPointToastView * toastView = [YHPointToastView new];
        NSString * contentY = [NSString stringWithFormat:@"Y軸: %lf",passPoint.valueY];
        NSString * contentX = [NSString stringWithFormat:@"X軸: %lf",passPoint.valueX];
        NSString * content = [NSString stringWithFormat:@"%@\n%@",contentY,contentX];
        toastView.textTitle.text = content;
        return toastView;
    }];
    
    折線點(diǎn)的數(shù)據(jù)信息
    for(NSInteger i = 0; i < 11; i++){
        [item addPoint:[YHLinePointItem valueX:i valueY:(i*4)%11]];
    }
    添加到視圖中
    [chartView addLineChart:item];

柱狀圖實(shí)例


        YHLineChartItem * item = [YHLineChartItem new];
        item.showType = YHChartShowType_Bar; 水平
        YHChartShowType_BarCombine 垂直
        item.barCenterToScaleOffset = 0; 水平布局的話 相對刻度點(diǎn)布局
        item.lineWidth = Adapted(5); 柱狀圖的寬度
        item.pointPicker.canSelect = YES;
        item.pointPicker.radius = Adapted(10);
        item.pointPicker.barSelectSingle = YES;可選中
        ...其他設(shè)置跟折線圖一樣
        [chartView addLineChart:item];

餅圖實(shí)例

餅圖視圖
    YHPieChartView * chartView = [YHPieChartView new];
    chartView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.05];
    chartView.circleBgFillColor = [[UIColor grayColor] colorWithAlphaComponent:0.1];底色
    chartView.circleTopFillColor = [UIColor whiteColor];
    chartView.circleBorderWidth = 30;內(nèi)圓底色
    chartView.circleTopCenterAttTitle = [NSMutableAttributedString yh_initWithStr:@"我是中間的\n標(biāo)題內(nèi)容" customBlock:^(NSMutableAttributedString *att) {
        [att yh_font:[UIFont yh_pfOfSize:14]];
        [att yh_color:[UIColor yh_title_h3_note]];
        [att yh_color:[UIColor yh_red] range:[att.string rangeOfString:@"標(biāo)題內(nèi)容"]];
    }];
    [contentView addSubview:chartView];


餅塊信息
        YHPieChartItem * item = [YHPieChartItem new];
        item.value = arc4random()%100 + 1; 數(shù)值信息
        item.percent = item.value/200.0; 占的總比例 
如果添加單個(gè)要設(shè)置percent比例信息 如果是全部平分可不設(shè)置
        item.filleColor = [UIColor yh_randomcolor]; 填充色
        item.format = format;
        item.showAnnotation = YES; 顯示標(biāo)注點(diǎn)
        item.showAnnotationInside = YES; 標(biāo)注點(diǎn)位置
        [chartView addPercentPieBlock:item];

    YHLineChartView * chartView = [YHLineChartView new];

    坐標(biāo)軸Y
    NSMutableArray * scaleList = [NSMutableArray new];
    for(NSInteger i = 0; i < 11; i++){
        [scaleList addObject:[YHScaleItem att:YHHTitle(@(i).stringValue) value:i]];
    }
    [chartView updateAxisScaleList:scaleList width:40 position:(YHChartAxisPos_Bottom) dirction:(YHChartAxisDirection_LeftToRight)];

    坐標(biāo)軸X
    [scaleList removeAllObjects];
    for(NSInteger i = 0; i < 11; i++){
        [scaleList addObject:[YHScaleItem att:YHHTitle(@(i).stringValue) value:i]];
    }
    [chartView updateAxisScaleList:scaleList width:30 position:(YHChartAxisPos_Left) dirction:(YHChartAxisDirection_BottomToTop)];

    參考線
    [chartView addReflineAxisPosition:(YHChartAxisPos_Left) width:2 color:[UIColor yh_separator_dark] dotted:NO];
    [chartView addReflineAxisPosition:(YHChartAxisPos_Bottom) width:2 color:[UIColor yh_separator_dark] dotted:NO];
    [chartView addReflineAxisPosition:(YHChartAxisPos_Right) width:2 color:[UIColor yh_separator_dark] dotted:NO];
    [chartView addReflineAxisPosition:(YHChartAxisPos_Top) width:2 color:[UIColor yh_separator_dark] dotted:NO];
    [chartView addReflineAllAxisPos:YHChartAxisPos_Left config:^(YHReflineInfo * _Nonnull refline) {
        refline.lineColor = [UIColor yh_separator];
        refline.lineHeight = 1;
    }];
    [chartView addReflineAllAxisPos:(YHChartAxisPos_Bottom) config:^(YHReflineInfo * _Nonnull refline) {
        refline.lineColor = [UIColor yh_separator];
        refline.lineHeight = 1;
    }];

    折線圖
    YHLineChartItem * item = [YHLineChartItem new];
    item.coordInfoViewShow = YES;
    item.lineColor = [UIColor yh_blue];
    item.lineShowShadow = YES;
    item.lineShadowColorTop = [[UIColor yh_blue] colorWithAlphaComponent:0.8];
    item.lineShadowColorBottom = [[UIColor yh_blue] colorWithAlphaComponent:0.1];
    item.pointFillColor = [UIColor whiteColor];
    item.pointLineColor = [UIColor yh_blue];
    item.pointLineWidth = 1;
    item.pointRadius = 3;
    item.pointPicker.showReflineVertical = YES;
    item.pointPicker.showReflineHorizontal = YES;
    item.pointPicker.canSelect = YES;
    item.pointPicker.radius = 4;
    item.pointPicker.fillColor = [UIColor yh_blue];
    item.pointPicker.lineWidth = 0;
    [item.pointPicker setToastViewBlock:^UIView * _Nonnull(YHLinePointItem * _Nonnull passPoint) {
        YHPointToastView * toastView = [YHPointToastView new];
        NSString * contentY = [NSString stringWithFormat:@"Y軸: %lf",passPoint.valueY];
        NSString * contentX = [NSString stringWithFormat:@"X軸: %lf",passPoint.valueX];
        NSString * content = [NSString stringWithFormat:@"%@\n%@",contentY,contentX];
        toastView.textTitle.text = content;
        return toastView;
    }];
    
    數(shù)據(jù)
    for(NSInteger i = 0; i < 11; i++){
        [item addPoint:[YHLinePointItem valueX:i valueY:(i*4)%11]];
    }
    
    [chartView addLineChart:item];
    
    [contentView addSubview:chartView];
    [chartView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.top.equalTo(contentView);
        make.height.mas_equalTo(Adapted(180));

    }];

項(xiàng)目地址：https://github.com/MaiyaT/YHChart.git

iOS YHChart 折線圖 柱狀圖 餅圖

實(shí)現(xiàn)方式

坐標(biāo)軸支持

折線圖支持

柱狀圖支持

餅圖

iOS YHChart 折線圖柱狀圖餅圖