【iOS】图表实现-Charts（二）

上一篇讲了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];

参考：博客（还有一些关于k线图的知识点）

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;

【iOS】图表实现-Charts（二）

猜你喜欢