JBChartView图表库深度自定义指南-CSDN博客

JBChartView图表库深度自定义指南

JBChartView iOS-based charting library for both line and bar graphs. 项目地址: https://gitcode.com/gh_mirrors/jb/JBChartView

前言

JBChartView是一个功能强大的iOS图表库，提供了丰富的自定义选项。本文将全面解析如何通过代码对JBChartView进行深度定制，帮助开发者创建符合应用风格的图表。

基础配置

背景设置

所有JBChartView子类都支持标准视图背景设置：

// 设置条形图背景色
self.barChartView.backgroundColor = [UIColor whiteColor]; 

// 设置折线图背景色  
self.lineChartView.backgroundColor = [UIColor lightGrayColor];

页眉页脚

类似UITableView，图表支持添加页眉和页脚视图：

// 添加页脚视图
UIView *customFooter = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
self.barChartView.footerView = customFooter;

// 添加页眉视图
UIView *customHeader = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
self.lineChartView.headerView = customHeader;

状态控制

图表支持展开/折叠状态切换，并可设置动画效果：

// 无动画切换状态
[self.barChartView setState:JBChartViewStateExpanded animated:NO callback:nil];

// 带动画和回调的状态切换
[self.lineChartView setState:JBChartViewStateCollapsed 
                   animated:YES 
                  callback:^{
                      NSLog(@"动画完成!");
                  }];

条形图(JBBarChartView)定制

方向控制

条形图支持正反两种方向显示：

// 设置为倒置显示(从上到下)
self.barChartView.inverted = YES;

条形样式

开发者可以通过三种方式自定义条形样式：

自定义视图（最高优先级）

- (UIView *)barChartView:(JBBarChartView *)barChartView barViewAtIndex:(NSUInteger)index {
    MyCustomBarView *bar = [[MyCustomBarView alloc] init];
    return bar;
}

单一颜色（中等优先级）

- (UIColor *)barChartView:(JBBarChartView *)barChartView colorForBarViewAtIndex:(NSUInteger)index {
    return [UIColor colorWithRed:index/10.0 green:0.5 blue:0.5 alpha:1.0];
}

渐变效果（最低优先级）

- (CAGradientLayer *)barGradientForBarChartView:(JBBarChartView *)barChartView {
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.colors = @[(id)[UIColor blueColor].CGColor, 
                       (id)[UIColor greenColor].CGColor];
    return gradient;
}

选择状态

定制选中条形的样式：

// 选择指示器颜色
- (UIColor *)barSelectionColorForBarChartView:(JBBarChartView *)barChartView {
    return [UIColor yellowColor];
}

// 选中回调
- (void)barChartView:(JBBarChartView *)barChartView didSelectBarAtIndex:(NSUInteger)index touchPoint:(CGPoint)touchPoint {
    NSLog(@"选中第%ld个条形", index);
    // 可以在此处显示工具提示等
}

// 取消选中回调
- (void)didDeselectBarChartView:(JBBarChartView *)barChartView {
    NSLog(@"取消选择");
}

折线图(JBLineChartView)定制

线条样式

折线图提供丰富的线条定制选项：

// 线条颜色
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView colorForLineAtLineIndex:(NSUInteger)lineIndex {
    return [UIColor colorWithRed:lineIndex/5.0 green:0.8 blue:0.3 alpha:1.0];
}

// 线条宽度
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView widthForLineAtLineIndex:(NSUInteger)lineIndex {
    return 2.0 + lineIndex; // 不同线条不同宽度
}

// 线条样式(实线/虚线)
- (JBLineChartViewLineStyle)lineChartView:(JBLineChartView *)lineChartView lineStyleForLineAtLineIndex:(NSUInteger)lineIndex {
    return (lineIndex % 2 == 0) ? JBLineChartViewLineStyleSolid : JBLineChartViewLineStyleDashed;
}

填充样式

折线下方区域支持多种填充方式：

纯色填充

- (UIColor *)lineChartView:(JBLineChartView *)lineChartView fillColorForLineAtLineIndex:(NSUInteger)lineIndex {
    return [[UIColor blueColor] colorWithAlphaComponent:0.2];
}

渐变填充

- (CAGradientLayer *)lineChartView:(JBLineChartView *)lineChartView fillGradientForLineAtLineIndex:(NSUInteger)lineIndex {
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.colors = @[(id)[[UIColor blueColor] colorWithAlphaComponent:0.5].CGColor,
                       (id)[[UIColor greenColor] colorWithAlphaComponent:0.1].CGColor];
    gradient.startPoint = CGPointMake(0.5, 0.0);
    gradient.endPoint = CGPointMake(0.5, 1.0);
    return gradient;
}

数据点样式

// 显示数据点
- (BOOL)lineChartView:(JBLineChartView *)lineChartView showsDotsForLineAtLineIndex:(NSUInteger)lineIndex {
    return YES;
}

// 数据点半径
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dotRadiusForDotAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex {
    return 5.0;
}

// 自定义数据点视图
- (UIView *)lineChartView:(JBLineChartView *)lineChartView dotViewAtHorizontalIndex:(NSUInteger)horizontalIndex atLineIndex:(NSUInteger)lineIndex {
    UIView *dot = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
    dot.layer.cornerRadius = 5;
    dot.backgroundColor = [UIColor purpleColor];
    return dot;
}

选择交互

// 选择指示器样式
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView verticalSelectionColorForLineAtLineIndex:(NSUInteger)lineIndex {
    return [UIColor redColor];
}

- (CGFloat)verticalSelectionWidthForLineChartView:(JBLineChartView *)lineChartView {
    return 2.0;
}

// 选中时线条颜色
- (UIColor *)lineChartView:(JBLineChartView *)lineChartView selectionColorForLineAtLineIndex:(NSUInteger)lineIndex {
    return [UIColor yellowColor];
}

// 未选中线条的透明度
- (CGFloat)lineChartView:(JBLineChartView *)lineChartView dimmedSelectionOpacityAtLineIndex:(NSUInteger)lineIndex {
    return 0.3; // 30%不透明度
}

高级技巧

平滑曲线：启用贝塞尔曲线平滑效果

- (BOOL)lineChartView:(JBLineChartView *)lineChartView smoothLineAtLineIndex:(NSUInteger)lineIndex {
    return YES;
}

动态渐变：创建水平/垂直渐变效果

CAGradientLayer *gradient = [CAGradientLayer new];
gradient.startPoint = CGPointMake(0.0, 0.0); // 左上角
gradient.endPoint = CGPointMake(1.0, 1.0);   // 右下角
gradient.colors = @[(id)[UIColor blueColor].CGColor, 
                   (id)[UIColor greenColor].CGColor];

工具提示：利用touchPoint实现

- (void)lineChartView:(JBLineChartView *)lineChartView didSelectLineAtIndex:(NSUInteger)lineIndex horizontalIndex:(NSUInteger)horizontalIndex touchPoint:(CGPoint)touchPoint {
    // 在touchPoint位置显示工具提示
    self.tooltipView.center = touchPoint;
    self.tooltipView.hidden = NO;
}