最近工程用到了 Charts, 網(wǎng)上苦苦找尋, 只發(fā)現(xiàn)了 Android 的詳細(xì)使用說(shuō)明, 于是決定翻譯一下, 方便大家以后使用, Android 原文: 莊宏基的博客
- 博客頻道 - CSDN.NET
? Chart 支持折線(xiàn)圖局扶、柱狀圖、散點(diǎn)圖削彬、燭狀圖、氣泡圖著摔、餅狀圖和蜘蛛網(wǎng)狀圖, 除此之外還支持多種圖表混合使用
? Chart 支持縮放爽待、拖拽腐魂、選擇、動(dòng)畫(huà)
? Chart 使用 Swift, 如果工程為 OC, 則需要混編
<1> cocoapods 導(dǎo)入(或 Github 下載以后, 找到 Charts 下 Classes 文件夾手動(dòng)導(dǎo)入即可)
<2> Build Settings-Build Options-Embedded Content Contains Swift Code-YES,?
<3> #import <工程名-Swift.h>
用法及其基本屬性
拿 CombinedChartView(復(fù)合圖表) 舉例
CombinedChartView *chartView = [[CombinedChartView alloc] initWithFrame:frame];
// 可以添加CombinedChartDrawOrderBar, CombinedChartDrawOrderBubble, CombinedChartDrawOrderCandle, CombinedChartDrawOrderLine, CombinedChartDrawOrderScatter
chartView.drawOrder = @[CombinedChartDrawOrderLine];
chartView.delegate = self;
[self.view addSubview:chartView];
// 設(shè)置 chartView 的數(shù)據(jù)源
CombinedChartData *data = [[CombinedChartData alloc] initWithXVals:@[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]];
LineChartData *d = [[LineChartData alloc] init];
NSMutableArray *entries = @[].mutableCopy;
for (int index = 0; index < ITEM_COUNT; index++) {
[entries addObject:[[ChartDataEntry alloc] initWithValue:(arc4random_uniform(15) + 10) xIndex:index]];
}
LineChartDataSet *set = [[LineChartDataSet alloc] initWithYVals:entries label:@"Line DataSet"];
[d addDataSet:set];
data.lineData = d;
chartView.data = data;
ChartViewDelegate
// 選中 chartView 上的某個(gè)點(diǎn)
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry dataSetIndex:(NSInteger)dataSetIndex highlight:(ChartHighlight * _Nonnull)highlight {
//entry 里有xIndex(下標(biāo))和 value(下標(biāo)對(duì)應(yīng)的值)
//dataSetIndex 為選中數(shù)據(jù)集合的 index
}
// 沒(méi)有選中時(shí)
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView {
}
// chartView 縮放時(shí)
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {
}
// chartView 拖拽時(shí)
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {
}
屬性:
分為對(duì) ChartView, 對(duì)ChartXAxis, 對(duì)ChartYAxis,? 對(duì)ChartDataSet 的設(shè)置
? ChartView
chartView.descriptionText = @"這是個(gè)圖表";// 右下角描述
chartView.noDataTextDescription = "No Data";// 沒(méi)有數(shù)據(jù)時(shí)描述
chartView.drawGridBackgroundEnabled = YES;// 網(wǎng)格背景
chartView.gridBackgroundColor = [UIColor redColor];//? 背景顏色
chartView.drawBarShadowEnabled = NO;// 陰影
chartView.drawBordersEnabled = YES;// 邊框
chartView.pinchZoomEnabled = YES// XY 軸同時(shí)縮放
chartView.scaleEnabled = YES;// 縮放
chartView.highlightPerDragEnabled = YES;// 能否拖拽高亮線(xiàn)(數(shù)據(jù)點(diǎn)與坐標(biāo)的提示線(xiàn))
chartView.autoScaleMinMaxEnabled = YES;// 縮放時(shí)自動(dòng)調(diào)整最大最小值
chartView.legend.enabled = NO;// 圖例是否顯示
chartView.drawBordersEnabled = YES;// 表格邊框是否顯示
chartView.scaleYEnabled = NO;//? 縮放 Y 軸
chartView.scaleXEnabled = YES;// 縮放 X 軸
chartView.doubleTapToZoomEnabled = YES;//? 雙擊縮放
chartView.borderColor = [UIColor BlueColor];// 邊框顏色
chartView.dragDecelerationEnabled = YES;// 結(jié)束拖拽減速
chartView.maxVisibleValueCount = 30;// 可見(jiàn)標(biāo)簽數(shù)量最大值(setDrawValues才生效)
[chartView setExtraOffsetsWithLeft:10 top:0 right:10 bottom:0];// 偏移
? ChartXAxis
ChartXAxis *xAxis = chartView.xAxis;
[xAxis setLabelsToSkip:4];// 跳過(guò)顯示的標(biāo)簽數(shù)
xAxis.labelPosition = XAxisLabelPositionBottom;// X軸的位置
xAxis.labelTextColor = [UIColor whiteColor];//? 顏色
xAxis.spaceBetweenLabels = 16.0;// 標(biāo)簽之間的間距
xAxis.avoidFirstLastClippingEnabled = YES;// 兩側(cè)超出圖表
xAxis.gridColor = [UIColor whiteColor];// X 軸網(wǎng)格線(xiàn)顏色
xAxis.drawAxisLineEnabled = NO;// X 軸邊線(xiàn)
xAxis.drawGridLinesEnabled = NO;// X 軸網(wǎng)格線(xiàn)
? ChartYAxis
ChartYAxis *rightAxis = chartView.rightAxis;
rightAxis.drawGridLinesEnabled = NO;// Y 軸網(wǎng)格線(xiàn)
rightAxis.labelCount = 7;//? 標(biāo)簽個(gè)數(shù)
rightAxis.drawAxisLineEnabled = NO;// Y 軸邊線(xiàn)
rightAxis.startAtZeroEnabled = NO;//? 從零顯示
rightAxis.granularityEnabled = YES;// 軸密度自適應(yīng)
rightAxis.labelPosition = YAxisLabelPositionInsideChart;// Y? 軸位置
rightAxis.spaceTop = 10;// 最高值的頂部間距占最高值的值的百分比
rightAxis.showOnlyMinMaxEnabled = YES;// 只顯示最大最小
? ChartDataSet
LineChartDataSet *set = [[LineChartDataSet alloc] initWithYVals:NSArray<ChartDataEntry *>];
set.drawCubicEnabled = NO;// 曲線(xiàn)為圓滑曲線(xiàn)
set.cubicIntensity = 0.2;// 曲線(xiàn)弧度
set.drawCirclesEnabled = NO;// 每個(gè)點(diǎn)是否顯示
set.lineWidth = 0.8f;// 線(xiàn)寬
set.circleRadius = 4.0;// 每個(gè)點(diǎn)的切角
[set setCircleColor:UIColor.whiteColor];// 每個(gè)點(diǎn)的顏色
set.highlightColor = [UIColor redColor];// 點(diǎn)擊某個(gè)點(diǎn)時(shí)捂人，橫豎兩條線(xiàn)的顏色
set.fillColor = [UIColor whiteColor];// 填充顏色
set.drawHorizontalHighlightIndicatorEnabled = NO;// 點(diǎn)擊某個(gè)點(diǎn)時(shí)御雕，水平線(xiàn)是否顯示
set.drawValuesEnabled = YES;// 在點(diǎn)上繪制Value
// 漸變數(shù)組
NSArray *gradientColors = @[(id)COLOR_BLUE.CGColor,(id)COLOR_BLUE.CGColor];
CGGradientRef gradient = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
// 漸變?cè)O(shè)置
set.fillAlpha = 0.13f;
set.fill = [ChartFill fillWithLinearGradient:gradient angle:90.f];
set.drawFilledEnabled = YES;
...還有很多, 就不一一列舉了, 如果還有什么需要, 可以留言, 我會(huì)一一補(bǔ)充的, 后續(xù)還有實(shí)時(shí)數(shù)據(jù), 動(dòng)畫(huà), MakerView等其它
