【iOS】圖表實現-Charts(二)
阿新 • • 發佈:2018-12-22
上一篇講了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:1xValue: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;