近期公司的产品有新的需求,大概效果就如下所示:
我们使用的是ios-charts这个第三方,但是在网上找了一大堆也没有发现这种效果的柱状图,没办法只能自己操刀来实现了。实现过程中借鉴了安卓中的MPCharts类似效果的实现方法,话不多说,直接上代码,代码中注释已经比较清晰了,有不懂得欢迎咨询。
我是写了一个这种效果实现的工具类,在.h文件中申明方法:
/**
两根柱子以及折线的混合显示
@param combineChart 需要设置的CombineChartView
@param xValues X轴的值数组,里面放字符串
@param lineValues 折线值数组
@param bar1Values 柱子1的值数组
@param bar2Values 柱子2的值数组
@param lineTitle 图例中折线的描述
@param bar1Title 图例中柱子1的描述
@param bar2Title 图例中柱子2的描述
warning:由于绘制有顺序,所以绘制高柱子应该在绘制低柱子之前进行,所以bar1Values中的值要大于对应的bar2Values中的值,绘制折线应该在最后进行
*/
- (void)setCombineBarChart:(CombinedChartView *)combineChart xValues:(NSArray *)xValues lineValues:(NSArray *)lineValues bar1Values:(NSArray *)bar1Values bar2Values:(NSArray *)bar2Values lineTitle:(NSString *)lineTitle bar1Title:(NSString *)bar1Title bar2Title:(NSString *)bar2Title;
在.m文件中实现这个方法:
- (void)setCombineBarChart:(CombinedChartView *)combineChart xValues:(NSArray *)xValues lineValues:(NSArray *)lineValues bar1Values:(NSArray *)bar1Values bar2Values:(NSArray *)bar2Values lineTitle:(NSString *)lineTitle bar1Title:(NSString *)bar1Title bar2Title:(NSString *)bar2Title
{
combineChart.descriptionText = @"";
combineChart.pinchZoomEnabled = YES;
combineChart.marker = [[ChartMarkerView alloc] init];
combineChart.drawOrder = @[@0,@0,@2];//CombinedChartDrawOrderBar,CombinedChartDrawOrderLine 绘制顺序
combineChart.doubleTapToZoomEnabled = NO;//取消双击放大
combineChart.scaleYEnabled = NO;