iOS CombinedChartView

复合图表：最多显示4个公司的数据，其他可以滑动，数值以及x轴使用千分位，保留小数点后2位，柱形图不显示数值，点击显示

 

 

+ (CombinedChartView *)XZZCombinedChartView{

    

    /* 设置图表的属性 */

    CombinedChartView *_combinedChartView = [[CombinedChartView alloc] init];

    _combinedChartView.drawOrder = @[@(CombinedChartDrawOrderBar), @(CombinedChartDrawOrderLine)]; // 绘制顺序（折线图在柱状图上面）

    _combinedChartView.noDataText = @"暂无数据"; // 无数据时显示的文字

    _combinedChartView.noDataTextColor = XZGreenColor2;

    _combinedChartView.descriptionText = @"";// 描述文字

    _combinedChartView.legend.enabled = YES; // 隐藏图例

    _combinedChartView.pinchZoomEnabled = YES; // 触控放大

    _combinedChartView.doubleTapToZoomEnabled = YES; // 双击放大

    _combinedChartView.scaleXEnabled = NO; // X 轴缩放

    _combinedChartView.scaleYEnabled = NO; // Y 轴缩放

    _combinedChartView.scaleEnabled = YES; // 缩放

    _combinedChartView.highlightPerTapEnabled = YES; // 单击高亮

    _combinedChartView.highlightPerDragEnabled = NO; // 拖拽高亮

    _combinedChartView.dragEnabled = YES; // 拖拽图表

    _combinedChartView.dragDecelerationEnabled = YES; // 拖拽后是否有惯性效果

    _combinedChartView.dragDecelerationFrictionCoef = 0.5; // 拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显

    _combinedChartView.xAxis.granularity = 1;

  

    /* 设置 X 轴显示的值的属性 */

    ChartXAxis *xAxis = _combinedChartView.xAxis;

    xAxis.labelPosition = XAxisLabelPositionBottom; // 显示位置

    xAxis.drawGridLinesEnabled = NO; // 网格绘制

    xAxis.axisLineColor =  [UIColor blackColor]; // X 轴颜色

    xAxis.axisLineWidth = 1.f; // X 轴线宽

    xAxis.labelFont = [UIFont systemFontOfSize:12]; // 字号

    xAxis.labelTextColor = [UIColor blackColor]; // 颜色

    /* 设置左侧 Y 轴显示的值的属性 */

    ChartYAxis *leftAxis = _combinedChartView.leftAxis;

    leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // 显示位置

    leftAxis.drawGridLinesEnabled = NO; // 网格绘制

    leftAxis.drawAxisLineEnabled = YES; // 是否显示轴线

    leftAxis.labelFont = [UIFont systemFontOfSize:10]; // 字号

    leftAxis.labelTextColor = [UIColor blackColor]; // 颜色

    leftAxis.axisLineColor =  [UIColor blackColor]; // Y 轴颜色

    leftAxis.axisLineWidth = 1.f; // Y 轴线宽

    leftAxis.axisMinimum = 0; // 最小值

    /* 设置隐藏右侧 Y 轴显示的值的属性 */

    ChartYAxis *rightAxis = _combinedChartView.rightAxis;

    rightAxis.enabled = NO;

    

    return _combinedChartView;

}

这里我要吐槽下我遇到的坑 highlightPerTapEnabled 我吧这个属性设置成no 的时候，我的柱形图点击没有了反应，代理也没调用，找了好久才爬出来。

- (void)setValues:(NSArray *)Values{

    if (Values.count == 0) {

        self.combinedChartView.noDataText = @"~暂无数据~";

        return;

    }

    NSMutableArray *xValues = [NSMutableArray array];

    NSMutableArray *bar1Values = [NSMutableArray array];

    NSMutableArray *bar2Values = [NSMutableArray array];

    for (OtherSubHomeModel *model in Values) {

        [xValues addObject:model.company];

        [bar1Values addObject:model.data];

        [bar2Values addObject:model.refundData];

    }

    CombinedChartData *data = [[CombinedChartData alloc] init];

    

    data.lineData = [self getLineData:[bar1Values copy] LineTitle:self.M.isCuv?@"销量(个)":@"销售额"]; // 折线图数据

    data.barData = [self getTwoBarData:[bar2Values copy] bar2Values:[bar1Values copy] bar1Title:self.M.isCuv?@"退货数(个)":@"退款额" bar2Title:self.M.isCuv?@"销量(个)":@"销售额"]; // 柱状图数据

    // 图表数据

    double leftAxisMin = 0;

    double leftAxisMax = 0;

    double leftAxisMin1 = 0;

    double leftAxisMax1 = 0;

    for (int i=0; i<bar2Values.count; i++) {

        double val = [bar2Values[i] doubleValue];

        leftAxisMax1 = MAX(val, leftAxisMax1);

        leftAxisMin1 = MIN(val, leftAxisMax1);

    }

    for (int i=0; i<bar1Values.count; i++) {

        double val = [bar1Values[i] doubleValue];

        leftAxisMax = MAX(val, leftAxisMax);

        leftAxisMin = MIN(val, leftAxisMax);

    }

    设置x轴 :小数点+千分位

    ChartYAxis *leftAxis = self.combinedChartView.leftAxis;

    NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init];

    numberFormatter.numberStyle = kCFNumberFormatterDecimalStyle;

    numberFormatter.multiplier   = @0.001;

    numberFormatter.positiveSuffix = @"K";

    leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc]initWithFormatter:numberFormatter];

    leftAxis.axisMinimum = 0; // 左侧Y轴最小值

    leftAxis.axisMaximum = (leftAxisMax1 +leftAxisMax)+(0.5*(leftAxisMax1 +leftAxisMax)); //左侧Y轴最大值

    

    //设置x轴

    ChartXAxis *xAxis = self.combinedChartView.xAxis;

    xAxis.labelCount  = xValues.count;

    xAxis.axisMinimum = data.xMin - 0.5f; // X 轴最小数量

    xAxis.axisMaximum = data.xMax + 0.5f; // X 轴最大数

    

ChartIndexAxisValueFormatter *format= [[ChartIndexAxisValueFormatter alloc] initWithValues:xValues];

    xAxis.valueFormatter = format;

    

    XYMarkerView *marker = [[XYMarkerView alloc]initWithColor:XZLightGray font:[UIFont systemFontOfSize:12.0] textColor:XZDarkBlueColor insets:UIEdgeInsetsMake(8.0, 8.0, 8.0, 8.0) xName:self.M.state  yName:self.M.isCuv?@"退货数:":@"退款额:" data1:bar1Values data2:bar2Values];

   

    marker.chartView = self.combinedChartView;

    marker.minimumSize = CGSizeMake(80.f, 40.f);

    self.combinedChartView.marker = marker;

    [_combinedChartView setVisibleXRangeWithMinXRange:1 maxXRange:IS_IPHONE_5?4:6];

    [self.combinedChartView animateWithYAxisDuration:1.0]; // 添加 Y 轴动画

    

    NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];

    pFormatter.numberStyle = kCFNumberFormatterDecimalStyle;

    pFormatter.positiveFormat = @"###,##0.00";

 

    // 小数位数(销量小数位0)

    pFormatter.maximumFractionDigits = self.M.isCuv?0:2;

    

    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter]];

    

    [self.combinedChartView setData:data];

    [self.combinedChartView notifyDataSetChanged]; // 通知数据改变

    

}

/**

 两个柱形图

 */

- (BarChartData *)getTwoBarData:(NSArray *)bar1Values bar2Values:(NSArray *)bar2Values bar1Title:(NSString *)bar1Title bar2Title:(NSString *)bar2Title{

    //bar1Values：退款 bar2Values:销售

    NSMutableArray *bar1Entries = [NSMutableArray array];

    NSMutableArray *bar2Entries = [NSMutableArray array];

    for (int i=0; i<bar1Values.count; i++) {

        

        BarChartDataEntry *bar1Entry = [[BarChartDataEntry alloc] initWithX:i y:[bar1Values[i] floatValue]];

        [bar1Entries addObject:bar1Entry];

        

         BarChartDataEntry *bar2Entry = [[BarChartDataEntry alloc] initWithX:i y:[bar2Values[i] floatValue]];

        [bar2Entries addObject:bar2Entry];

    }

    

    BarChartDataSet *dataSet1 = [[BarChartDataSet alloc] initWithValues:bar1Entries label:bar1Title];

    dataSet1.colors = @[XZGreenColor2];

    dataSet1.axisDependency = AxisDependencyLeft; // 根据左边数据显示

    dataSet1.drawValuesEnabled = NO; // 是否显示数据

    

    BarChartDataSet *dataSet2 = [[BarChartDataSet alloc] initWithValues:bar2Entries label:bar2Title];

    dataSet2.colors = @[XZBlueColor];

    dataSet2.axisDependency = AxisDependencyLeft; // 根据左边数据显示

    dataSet2.drawValuesEnabled = NO; // 是否显示数据

    

    BarChartData *data = [[BarChartData alloc] initWithDataSets:@[dataSet2,dataSet1]];

    NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];

    pFormatter.numberStyle = kCFNumberFormatterDecimalStyle;

    // 小数位数(销量小数位0)

    pFormatter.maximumFractionDigits = self.M.isCuv?0:2;

    

    [data setValueFormatter:[[ChartDefaultValueFormatter alloc] initWithFormatter:pFormatter]];

    //柱形图的字体

    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:12]];

    [data setValueTextColor:[UIColor blackColor]];//柱形图的字体的颜色

    return data;

}

 

/**

 一个柱形图

 */

 

- (BarChartData *)getOneBarData:(NSArray *)bar1Values{

    NSMutableArray *barEntries = [NSMutableArray array];

    for (int i=0; i<bar1Values.count; i++) {

          BarChartDataEntry *barEntry = [[BarChartDataEntry alloc] initWithX:i y:[bar1Values[i] doubleValue] ];

        [barEntries addObject:barEntry];

    }

    BarChartDataSet *dataSet = [[BarChartDataSet alloc] initWithValues:barEntries];

    dataSet.colors = @[XZGreenColor2];

    dataSet.axisDependency = AxisDependencyLeft; // 根据左边数据显示

    dataSet.drawValuesEnabled = NO; // 是否显示数据

    BarChartData *data = [[BarChartData alloc] initWithDataSets:@[dataSet]];

    data.barWidth = 0.4f; // 柱状图宽度（数值范围 0 ~ 1）

    //柱形图的字体

    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10]];

    [data setValueTextColor:[UIColor blackColor]];//柱形图的字体的颜色

    return data;

}

 

- (LineChartData *)getLineData:(NSArray *)lineValues LineTitle:(NSString *)lineTitle {

    NSMutableArray *entries = [NSMutableArray array];

    double leftAxisMin = 0;

    double leftAxisMax = 0;

    for (int i = 0; i < lineValues.count; i++) {

        NSString *valStr = [NSString stringWithFormat:@"%@", lineValues[i]];

        double val = [valStr doubleValue];

        leftAxisMax = MAX(val, leftAxisMax);

        leftAxisMin = MIN(val, leftAxisMax);

        ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:[lineValues[i] floatValue]];

        [entries addObject:entry];

    }

    

    LineChartDataSet *dataSet = [[LineChartDataSet alloc] initWithValues:entries label:lineTitle];

    dataSet.mode = LineChartModeCubicBezier;

    dataSet.colors = @[[UIColor redColor]]; // 线的颜色

    dataSet.lineWidth = 2.f; // 线宽

    dataSet.circleRadius = 3.5f; // 圆点外圆半径

    dataSet.circleHoleRadius = 2.5f; // 圆点内圆半径

    dataSet.drawCircleHoleEnabled = YES;//是否绘制中间的空心

    dataSet.circleColors = @[[UIColor redColor]]; // 圆点外圆颜色

    dataSet.circleHoleColor = XZWhiteColor; // 圆点内圆颜色

    dataSet.axisDependency = AxisDependencyLeft; // 根据左边数据显示

    dataSet.drawValuesEnabled = NO; // 是否显示数据

    dataSet.mode = LineChartModeCubicBezier; // 折线图类型

    LineChartData *lineData = [[LineChartData alloc] initWithDataSet:dataSet];

    return lineData;

}

注意点2:  [_combinedChartView setVisibleXRangeWithMinXRange:1 maxXRange:IS_IPHONE_5?4:6];这个要在赋值的地方设置，否则黑乎乎一片，另外一定要设置x轴的labelcount，否则x轴显示的条目与柱形图不对应。XYMarkerView（swift） 就是点击柱形图弹出来的那个框。使用之前要记得建桥接文件。producerApps-Bridging-Heade.h(桥接文件名)。引入文件如下：#import "producerApps-Swift.h"

XYMarkerView:代码如下

 

import Foundation

import Charts

 

open class XYMarkerView: BalloonMarker

{

    @objc open var xAxisValueFormatter: IAxisValueFormatter?

   // fileprivate var yFormatter = NumberFormatter()

    

    fileprivate var xStr = String()

    fileprivate var yStr = String()

    fileprivate var data1 = [Double]()

    fileprivate var data2 = [Double]()

 @objc public init(color: UIColor, font: UIFont, textColor: UIColor, insets: UIEdgeInsets,xName:String,yName:String,data1:Array<Double>,data2:Array<Double>)

    {

        super.init(color: color, font: font, textColor: textColor, insets: insets)

      //  self.xAxisValueFormatter = xAxisValueFormatter

      

        //yFormatter.minimumFractionDigits = 1

        //yFormatter.maximumFractionDigits = 1

        self.xStr = xName

        self.yStr = yName

        self.data1 = data1

        self.data2 = data2

    }

  

    open override func refreshContent(entry: ChartDataEntry, highlight: Highlight)

    {

       // let a  = entry.x as Int;

        let index = Int(entry.x)

        let value1 = self.data1[index]

        let value2 = self.data2[index]

        var  string1 = ""

        

        var string2 = ""

        let number1 = NSNumber.init(value: value1)

        let number2 = NSNumber.init(value: value2)

        if self.xStr == "销量" {

            let format = NumberFormatter()

//小数点后不要位数

            format.positiveFormat = "###,###"

            string1 = format.string(from: number1)!

            string2 = format.string(from: number2)!

 

//            string1 = String(format: "%.0f",value1)

//            string2 = String(format: "%.0f",value2)

        }else{

            

            let format = NumberFormatter()

//小数点后两位小数

            format.positiveFormat = "###,##0.00"

            string1 = format.string(from: number1)!

            string2 = format.string(from: number2)!

            

//            string1 = String(format: "%.2f",value1)

//            string2 = String(format: "%.2f",value2)

        }

        setLabel(self.xStr + ":" + string1 + "\n" + self.yStr  + string2)

    }

    

}