iOS YHChart 折線圖 柱狀圖 餅圖

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

實現(xiàn)方式

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

坐標軸支持

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

折線圖支持

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

柱狀圖支持

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

餅圖

  • 添加刪除
  • 內(nèi)圓
  • 標注

示例:

折線圖-簡單

折線圖-平移動畫
折線圖-添加更新刪除
折線圖-右上坐標軸
折線圖-對數(shù)坐標軸
折線圖-雙Y軸
柱狀圖-簡單
柱狀圖-多條水平布局
柱狀圖-多條垂直布局
柱狀圖+折線圖
餅圖-簡單
餅圖-有內(nèi)圓

代碼示例

  • 坐標軸
方式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:
不顯示坐標軸
    chartView1.axisInfo.axisPos(YHChartAxisPos_Bottom).maxValue = 50;
    chartView1.axisInfo.axisPos(YHChartAxisPos_Left).maxValue = 50;

方式4:
平分坐標軸刻度 指數(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;
    }];
  • 參考線
四邊坐標軸線條:
[chartView addReflineAxisPosition:0xff width:1 color:[UIColor yh_separator] 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;
    }];

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

  • 折線實例
    YHLineChartItem * item = [YHLineChartItem new];
    item.coordInfoViewShow = YES; 顯示點坐標數(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]; 折線點 填充色
    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;
  折線點 可選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;
    }];
    
    折線點的數(shù)據(jù)信息
    for(NSInteger i = 0; i < 11; i++){
        [item addPoint:[YHLinePointItem valueX:i valueY:(i*4)%11]];
    }
    添加到視圖中
    [chartView addLineChart:item];
  • 柱狀圖實例

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

  • 餅圖實例
餅圖視圖
    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標題內(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:@"標題內(nèi)容"]];
    }];
    [contentView addSubview:chartView];


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

    坐標軸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)];

    坐標軸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));

    }];

項目地址:https://github.com/MaiyaT/YHChart.git

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容