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
double val = [bar2Values[i] doubleValue];
leftAxisMax1 = MAX(val, leftAxisMax1);
leftAxisMin1 = MIN(val, leftAxisMax1);
}
for (int i=0; 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
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
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)
}
}