上一篇讲了Charts的基本使用方法。这一篇讲讲我在开发中遇到的问题,以及网上一些朋友遇到的问题。
1.在开发中遇到最右边的坐标或者最上面的坐标被遮盖一半显示不全。
就像我说的这样,我在开发中,x轴显示6个坐标,最右面的左边显示时间(类似19/01),结果只显示了19/右面的显示不全。这样的问题也可能出现在Y轴。解决方法比较简单。就是向上向右添加区域。
// chant view 顶部偏移量 [self.lineChartView setExtraTopOffset:40]; // chant view 右侧偏移量 [self.lineChartView setExtraRightOffset:20];
据说这行代码也可以实现
xAxis.spaceMax = 0.5;
2.动态展开
// 柱形图 CGFloat flout = self.xArray.count/3.8; //完美的值 [_chartView1 zoomAndCenterViewAnimatedWithScaleX:flout scaleY:1 xValue:0 yValue:0 axis:0 duration:1]; // 分段图 CGFloat flout = self.xArray.count/7; //完美的值 [_chartView zoomAndCenterViewAnimatedWithScaleX:flout scaleY:1 xValue:0 yValue:0 axis:0 duration:1]; // 折线图 CGFloat flout = xArray.count/5; [_chartView zoomAndCenterViewAnimatedWithScaleX:flout scaleY:1 xValue:0 yValue:0 axis:0 duration:1];
参考:博客(使用柱状图较多)
3.表格联动
这个需求可以用协议解决:
- (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY { CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix; [self.combinedChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.combinedChartView invalidate:YES]; [self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.barChartView invalidate:YES]; } - (void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY { CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix; [self.combinedChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.combinedChartView invalidate:YES]; [self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.barChartView invalidate:YES]; }
4.在一个图表上绘制多种类型的线表,例如K线图+柱状图
这个需求会用到另一个ChartView类型:CombinedChartView
CombinedChartData *combinedData = [[CombinedChartData alloc] init]; combinedData.lineData = [self generateLineData]; combinedData.candleData = [self generateCandleData];
5.设置x轴显示一定数量的数据
这时候最好不要留着labelcount数量设置。( xAxis.labelCount = 5;)
self.lineView.data = 你的数据(LineChartData ) // 设置完数据后的代码 在设置x轴显示 [self.lineView setVisibleXRangeWithMinXRange:6 maxXRange:8]; // 设置为整数偶尔会出现最后一个数据不显示情况 6->5.9 8->8.1
// 网上例子 //设置一页显示的数据条数,超出的数量需要滑动查看: _barChartView.setVisibleXRangeMaximum(double); //需要在设置数据源后生效(这是一个坑,懒加载写这个方法并没任何反应,必须在调用数据后使用才有效果)
6.交互柱状图时,只让用户左右滑动,不缩放
由于chart官网都是默认先缩放后才可以滑动,这就出现了困难,经过几番查找,发现只要在创建图表时就设置缩放的比例,这样用户交互时,就不用先放大后才可以滑动,从而解决需求,当然x,y轴的手势启动也要相应的设置下。
// 需求:只滑动不缩放:(系统内部默认是先缩放后滑动)及初始化时x轴就缩放1.5倍,就可以滑动了, ChartViewPortHandler *scaleX = _barChartView.viewPortHandler;[scaleX setMinimumScaleX:1.5f]; //设置动画效果,可以设置X轴和Y轴的动画效果 [_barChartView animateWithYAxisDuration:0.25f];
7.当x轴每一个单元数据太长(比如说学生的名字太长),就会形成太拥挤的现象
// 可以倾斜显示x轴每一个单元数据, xAxis.labelRotationAngle = -30; // x轴上名字的旋转角度,仿网页上的
8.一个关于折线图曲线 高亮选中的博客
9.自定义markview
下面是我写的一个简单的MarkView
import UIKit import Charts class CustomMarker: MarkerView { var rankLabel = UILabel() var numLabel = UILabel() @objc open var dataArray :[StaffMonthStatisticModel] = [] var monthModel = StaffMonthStatisticModel() override func refreshContent(entry: ChartDataEntry, highlight: Highlight) { super.refreshContent(entry: entry, highlight: highlight) monthModel = self.dataArray[Int(entry.x)] NSLog("%@ ---- %@", monthModel.rank,monthModel.dealSucceedNum) rankLabel.text = monthModel.rank numLabel.text = monthModel.dealSucceedNum } override func draw(context: CGContext, point: CGPoint) { super.draw(context: context, point: point) rankLabel.removeFromSuperview() numLabel.removeFromSuperview() self.bounds.size = CGSize.init(width: 40, height: 40) self.offset = CGPoint(x: 0, y: -self.bounds.size.height - 2) let topimageView = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: 18, height: 18)) topimageView.image = UIImage.init(named: "month_uo") self.addSubview(topimageView) rankLabel = UILabel.init(frame: CGRect.init(x: 18, y: 0, width: 22, height: 20)) rankLabel.textColor = UIColor.black rankLabel.font = UIFont.systemFont(ofSize: 12) rankLabel.adjustsFontSizeToFitWidth = true rankLabel.textAlignment = .right self.addSubview(rankLabel) let bottomimageView = UIImageView.init(frame: CGRect.init(x: 0, y: 22, width: 18, height: 18)) bottomimageView.image = UIImage.init(named: "month_complete") self.addSubview(bottomimageView) numLabel = UILabel.init(frame: CGRect.init(x: 18, y: 20, width: 22, height: 20)) numLabel.textColor = UIColor.black numLabel.font = UIFont.systemFont(ofSize: 12) numLabel.adjustsFontSizeToFitWidth = true numLabel.textAlignment = .right self.addSubview(numLabel) } }
使用
// // 弹出 为了确定有 数组已放到下面 // CustomMarker *marker = [[CustomMarker alloc] init]; // marker.chartView = _chartView; // _chartView.marker = marker;