【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;