Trung tâm cá nhân
sách gpt4 ăn đã đi

Ví dụ về cách vẽ biểu đồ đẹp trên iOS

In lại Tác giả: qq735679552 Thời gian cập nhật: 28-09-2022 22:32:09 25 4
mua khóa gpt4 giày nike

CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này có các ví dụ về cách vẽ biểu đồ đẹp trên iOS được tác giả sưu tầm và biên soạn. Nếu các bạn quan tâm đến bài viết này thì nhớ like nhé.

Lời nói đầu.

Có rất nhiều thư viện vẽ biểu đồ trên iOS Hôm nay mình sẽ giới thiệu với các bạn một thư viện rất nổi tiếng - biểu đồ.

Với sự trợ giúp của biểu đồ, chúng ta có thể vẽ các biểu đồ đường, biểu đồ thanh, biểu đồ hình tròn, đường K, radar, biểu đồ hỗn hợp đẹp mắt, v.v.

địa chỉ github.

Ví dụ về cách vẽ biểu đồ đẹp trên iOS

1. Tích hợp biểu đồ.

Đây chỉ là giải thích ngắn gọn, để biết chi tiết, vui lòng tham khảo biểu đồ phương pháp tích hợp chính thức.

Nếu bạn sử dụng tính năng phát triển nhanh, bạn có thể nhập trực tiếp biểu đồ.

Nếu bạn sử dụng phát triển oc, bạn cần trộn nó và tạo tệp cầu nối projectname-bridging-header.h. Dưới đây là phần giới thiệu chi tiết về phát triển hỗn hợp.

  1. Sử dụng cacaopod, viết: pod 'charts' vào tệp podfile, sau đó pod install
  2. Trong tệp cầu nối biểu đồ @import;
  3. Trong tệp cần sử dụng biểu đồ, #import "projectname-bridging-header.h", bạn có thể sử dụng mã trong biểu đồ

2. Biểu đồ đường.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// Khởi tạo biểu đồ đường
- (linechartview *)linechartview{
  nếu như (!_linechart xem){
   _linechartview = [[phân bổ linechartview] initwithframe:cgrectzero];
   [_linechartview setextraoffsetswithleft:15 trên cùng:0 phải:15 dưới cùng:10]; // khoảng cách từ cạnh
   _linechartview.delegate = tự; // Đặt proxy
   _linechartview.backgroundcolor = [uicolor màu trắng];
   _linechartview.nodatatext = @ "Chưa có xu hướng giá cho sản phẩm này" ;
   _linechartview.nodatafont = [kích thước phông chữ hệ thống uifont:15];
   _linechartview.nodatatextcolor = màu lục giác(0x444444);
   _linechartview.chartdescription.enabled = có;
   _linechartview.scaleyenabled = không; //Hủy chia tỷ lệ trục y
   _linechartview.scalexenabled = không; //Hủy chia tỷ lệ trục x
   _linechartview.doubletaptozoomenabled = không; //Hủy thu phóng nhấp đúp
   _linechartview.dragenabled = có; //Cho phép kéo và thả
   _linechartview.dragdecelerationenabled = có; // Liệu có hiệu ứng quán tính sau khi kéo không
   _linechartview. hệ số ma sát giảm tốc kéo = 0,9; // Hệ số ma sát (0~1) của hiệu ứng quán tính sau khi kéo. Giá trị càng nhỏ thì quán tính càng ít rõ ràng.
   // Mô tả và kiểu chú giải
   [_linechartview setdescriptiontext:@ "" ];
   _linechartview.legend.enabled = không;
  
   // Đặt trục y bên trái
   _linechartview.rightaxis.enabled = có; // Vẽ trục bên phải
   trục biểu đồ *trục trái = _linechartview.trục trái; //Lấy trục y bên trái
   leftaxis.labelcount = 5; // Số lượng nhãn trục y, giá trị không nhất thiết phải nhất định. Nếu Forcelabelsenabled bằng có thì số lượng nhãn đã chỉ định sẽ buộc phải rút ra, nhưng có thể không chẵn.
   leftaxis.forcelabelsenabled = không; // Không ép vẽ số lượng lab đã chỉ định
   trục trái.độ rộng đường trục = 0,6;  //Đặt độ rộng đường trục y
   leftaxis.axislinecolor = [uicolor blackcolor]; //Đặt màu trục y
   //leftaxis.axisminvalue = 0;//Đặt giá trị tối thiểu của trục y
   //leftaxis.axismaxvalue = 105;//Đặt giá trị lớn nhất của trục y
   leftaxis.inverted = không; // Lật trục y lên hay xuống
   leftaxis.axislinecolor = [uicolor blackcolor]; // màu trục y
   leftaxis.labelposition = yaxislabelpositioninsidechart; //vị trí nhãn
   leftaxis.labeltextcolor = [uicolor blackcolor]; // Màu văn bản
   leftaxis.labelfont = [kích thước phông chữ hệ thống uifont:10.0f]; // Phông chữ văn bản
   //leftaxis.valueformatter = [[symbolsvalueformatter alloc]init];//Đặt định dạng dữ liệu của trục y
   trục trái.gridlinedashlengths = @[@3.0f, @3.0f]; //Đặt đường lưới kiểu nét đứt
   leftaxis.gridcolor = [uicolor colorwithred:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // màu đường lưới
   leftaxis.gridantialiasenabled = có; //Bật khử răng cưa
  
   //Đặt trục z
   trục biểu đồ *trục phải = _linechartview.trục phải; //Lấy đúng trục z
   rightaxis.axislinewidth = 0,6;
   rightaxis.axislinecolor = [uicolor blackcolor]; // màu trục z
   rightaxis.drawgridlinesenabled = không;
   rightaxis.drawlabelsenabled = không;
  
   //Đặt trục x
   chartxaxis *xaxis = _linechartview.xaxis;
   xaxis.valueformatter = tự;   // Đây là đoạn mã quan trọng nhất
   xaxis.granularityenabled = có; //Đặt các giá trị lặp lại không được hiển thị
   xaxis.labelcount = 5;
   xaxis.spacemin = 0;    //Đặt khoảng trống tối thiểu bổ sung cho trục tọa độ
   xaxis.forcelabelsenabled = có;
   xaxis.labelposition = xaxislabelpositionbottom; //Đặt dữ liệu trục x ở dưới cùng
   xaxis.labeltextcolor = [uicolor blackcolor]; // Màu văn bản
   xaxis.độ rộng đường trục = 0,6;
   xaxis.axislinecolor = [uicolor màu đen]; // Màu của trục x
   xaxis.gridlinedashlengths = @[@3.0f, @3.0f]; //Đặt đường lưới kiểu nét đứt
   xaxis.gridcolor = [uicolor colorwithred:200/255.0f green:200/255.0f blue:200/255.0f alpha:1]; // màu đường lưới
   xaxis.gridantialiasenabled = có; //Bật khử răng cưa
   //_linechartview.maxvisiblecount = 999;//Đặt lượng dữ liệu có thể được hiển thị
  
   //Đặt lớp nổi
   _linechartview.drawmarkers = có;
   chartmarkerview * makerview = [[chartmarkerview alloc]init];
   makerview.offset = cgpointmake(-self.subpriceview.frame.size.width,-self.subpriceview.frame.size.height/2);
   makerview.chartview = _linechartview;
   _linechartview.marker = makerview;
   [makerview thêm chế độ xem phụ: self.subpriceview];
  }
  trở lại _biểu đồ đường;
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// Nguồn dữ liệu cho biểu đồ đường
- (dữ liệu biểu đồ đường *)getlinedata{
 
  nếu như (self.pricetrenddatasource.count == 0) trở lại không;
 
  //Dữ liệu được hiển thị trên trục x
  nsmutablearray *xvals = [mảng nsmutablearray];
 
  //Tương ứng với dữ liệu và giá cần hiển thị trên trục y
  nsmutablearray *yvals = [mảng nsmutablearray];
 
  chỉ số nsinteger = 0;
 
  vì (pricetrendmodel * mô hình trong self.pricetrenddatasource) {
  
   [xvals addobject:[nsstring stringwithformat:@ "%@" ,model.trend_x]];
  
   chartdataentry *entry_y = [[chartdataentry phân bổ] initwithx:index y:model.trend_y];
   [yvals addobject:entry_y];
  
   chỉ số ++;
  }
  linechartdataset *lineset = [[linechartdataset alloc] initwithvalues:yvals nhãn:@ "" ];
  lineset.mode = linechartmodecubicbezier;
  lineset. độ rộng dòng = 1.0f;
  lineset.drawvaluesenabled = không;
  lineset.valuecolors = @[[uicolor màu tím]]; // Màu của các giá trị trên polyline
  [bộ màu thiết lập dòng:hexcolor(0x24a5ea)]; // Màu sắc của polyline
  lineset.drawsteppedenabled = không; // Có bật vẽ biểu đồ dạng bậc thang hay không
  lineset.drawcirclesenabled = không;
  lineset.drawfilledenabled = không; // Có nên tô màu không
  lineset.circleradius = 1.0f;
  lineset.drawcircleholeenabled = không;
  lineset. bán kính vòng tròn = 0,0f;
  lineset.circleholecolor = [uicolor màu trắng];
 
  lineset.highlightenabled = có; //Chọn điểm uốn, có bật hiệu ứng highlight hay không (hiển thị các đường chéo)
  //lineset.highlightcolor = hexcolor(0xc83c23);//Click vào màu của dấu thập để chọn điểm uốn
  lineset.highlightcolor = [hexcolor(0x444444) colorwithalphacomponent:0.5]; //Click vào màu của hình chữ thập để chọn điểm uốn
  lineset.highlightlinewidth = 0,5; // Chiều rộng chéo
  //lineset.highlightlineashlengths = @[@5,@5]; //Đặt độ rộng đường chấm của hình chữ thập
 
  lineet.valuefont = [uifont systemfontofsize:12];
  lineset.axisdependency = axisdependencyleft;
 
  linechartdata *linedata = [[phân bổ linechartdata] initwithdataset:lineset];
 
  trở lại dữ liệu trực tuyến;
}

3. Biểu đồ hình tròn.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//Khởi tạo biểu đồ hình tròn
- (biểu đồ hình tròn *)biểu đồ hình tròn{
  nếu như (!_piechartview) {
   _piechartview = [[phân bổ piechartview] initwithframe:cgrectzero];
  
   _piechartview.backgroundcolor = [uicolor màu trắng];
  
   //Phong cách cơ bản
   //[_piechartview setextraoffsetswithleft:30 top:10 right:30 Bottom:10];//Khoảng cách giữa biểu đồ hình tròn và cạnh
  
   [_piechartview setextraoffsetswithleft:0 trên cùng:0 phải:0 dưới cùng:0]; //Khoảng cách giữa biểu đồ hình tròn và cạnh
  
   _piechartview.usepercentvaluesenabled = không; // Có nên chuyển đổi dữ liệu được hiển thị sang định dạng phần trăm hay không dựa trên dữ liệu được cung cấp
   _piechartview.dragdecelerationenabled = có; // Liệu có hiệu ứng quán tính sau khi kéo biểu đồ hình tròn không
   _piechartview.drawslicetextenabled = không; // Có hiển thị văn bản khối hay không
  
   // phong cách rỗng
   _piechartview.drawholeenabled = có; //Biểu đồ hình tròn có rỗng không
   _piechartview.holeradiuspercent = 0,8; //Tỷ lệ bán kính rỗng
   _piechartview.holecolor = [uicolor xóa màu]; // màu rỗng
   _piechartview.transparentcircleradiuspercent = 0,52; //Tỷ lệ bán kính rỗng mờ
   _piechartview.transparentcirclecolor = [màu uicolor với màu đỏ: 210/255.0 xanh lá cây: 145/255.0 xanh lam: 165/255.0 alpha: 0,3]; // Màu của phần rỗng trong mờ
  
   //Đặt văn bản rỗng
  
   nếu như (_piechartview.isdrawholeenabled == có) {
    _piechartview.drawcentertextenabled = có; // Có hiển thị văn bản ở giữa không
    //Văn bản bình thường
    //_piechartview.centertext = @"Asset";//Trung tâm văn bản
    // văn bản có định dạng
    nsmutableattributedstring *centertext = [[nsmutableattributedstring phân bổ] initwithstring:@ "Chi tiết thu nhập và chi tiêu" ];
    [centertext setattributes:@{nsfontattributename: [uifont boldsystemfontofsize:18],
           nsforegroundcolorthuộc tínhtên: hexcolor(0x444444)}
         phạm vi:nsmakerange(0, centertext.length)];
    _piechartview.centerattributedtext = centertext;
   }
  
   //Đặt mô tả biểu đồ hình tròn
   _piechartview.descriptiontext = @ "" ;
   //_piechartview.descriptionfont = [kích thước phông chữ hệ thống uifont: 10];
   //_piechartview.descriptiontextcolor = [uicolor màu xám];
  
   //Đặt kiểu chú giải
   _piechartview.legend.maxsizepercent = 0; // Tỷ lệ kích thước của chú giải trong biểu đồ hình tròn, sẽ ảnh hưởng đến chiều rộng và chiều cao của chú giải
   _piechartview.legend.formtotextspace = 5; // Khoảng văn bản
   _piechartview.legend.yentryspace = 12; //10;
   _piechartview.legend.xentryspace = 15;
   _piechartview.legend.font = [kích thước phông chữ hệ thống uifont:10]; // cỡ chữ
   _piechartview.legend.textcolor = [uicolor màu xám]; //màu phông chữ
   _piechartview.legend.position = chartlegendpositionbelowchartcenter; //Vị trí của chú giải trong biểu đồ hình tròn
   _piechartview.legend.form = chartlegendformcircle; // Kiểu ảnh: hình vuông, đường thẳng, hình tròn
   _piechartview.legend.formsize = 0; //Kích thước hình ảnh
  }
  trở lại _biểu đồ hình tròn;
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//Nguồn dữ liệu cho biểu đồ hình tròn
- (biểu đồ dữ liệu piechart *)getpiedata{
 
  //Số lượng mỗi khối
  nsmutablearray * moneyarray = [nsmutablearray mảngvớimảng:@[@33.33,@66.66]];
 
  // Tên hoặc mô tả của từng khối
  //nsarray * xvals = @[@"Nạp tiền đặt cọc",@"Nạp tiền thành viên",@"Quà tặng tiền đặt cọc",@"Phí tặng quà thành viên",@"Tiền đóng băng"];
// nsmutablearray * xvals = [mảng nsmutablearray];
 
  // Màu sắc của từng khối
  nsmutablearray *colors = [[phân bổ nsmutablearray] khởi tạo];
 
  công tắc (_dự báo loại) {
   trường hợp dự báogiáloạilên:{
    [màu sắc addobject:hexcolor(0xff1f32)];
    [moneyarray xóa tất cả các đối tượng];
    [moneyarray addobject:@(self.forecastmodel.uprate)];
    [moneyarray addobject:@(1 - self.forecastmodel.uprate)];
    phá vỡ ;
   }
   trường hợp dự báogiáloạigiảm:{
    [màu sắc addobject:hexcolor(0x5fd954)];
    [moneyarray xóa tất cả các đối tượng];
    [moneyarray addobject:@(self.forecastmodel.downrate)];
    [moneyarray addobject:@(1 - self.forecastmodel.downrate)];
    phá vỡ ;
   }
   trường hợp dự báogiáloạicấp:{
    [màu sắc addobject:hexcolor(0x00d6f6)];
    [moneyarray xóa tất cả các đối tượng];
    [moneyarray addobject:@(self.forecastmodel.rate)];
    [moneyarray addobject:@(1 - self.forecastmodel.rate)];
    phá vỡ ;
   }
   mặc định :
    phá vỡ ;
  }
 
  [màu sắc addobject:hexcolor(0xf2f2f2)];
 
  //Dữ liệu cho từng khối
  nsmutablearray *yvals = [[nsmutablearray phân bổ] khởi tạo];
 
  vì ( số nguyên i = 0; i < mảng tiền. đếm; i++) {
  
   gấp đôi randomval = [moneyarray[i] giá trị kép];
  
   //barchartdataentry *entry = [[barchartdataentry alloc] initwithvalue:randomval xindex:i];
  
   //chartdataentry * entry = [[chartdataentry alloc] initwithvalue:giá trị ngẫu nhiên xindex:i];
  
   chartdataentry * entry = [[chartdataentry phân bổ] initwithx:iy:giá trị ngẫu nhiên];
  
   [yvals addobject:entry];
  }
 
  //bộ dữ liệu
  //piechartdataset *dataset = [[piechartdataset alloc] initwithyvals:yvals nhãn:@""];
  piechartdataset *dataset = [[piechartdataset alloc] initwithvalues:yvals nhãn:@ "" ];
  dataset.drawvaluesenabled = không; // Có nên vẽ và hiển thị dữ liệu không
  dataset.colors = màu sắc; //khối màu
  dataset.slicespace = 3; //Khoảng cách giữa các khối liền kề
  dataset.selectionshift = 2; // Khi khối được chọn, bán kính phóng to
  dataset.xvalueposition = piechartvaluepositioninsideslice; //Tên vị trí
  dataset.yvalueposition = piechartvaluepositionoutsidelice; //vị trí dữ liệu
  // Kiểu đa tuyến để chỉ báo giữa dữ liệu và khối
  tập dữ liệu.valuelinepart1offsetpercentage = 0,85; // Độ lệch của vị trí bắt đầu của đoạn đầu tiên trong đa tuyến so với khối. Giá trị càng lớn thì đa tuyến càng xa khối.
  dataset.valuelinepart1length = 0,5; //Tỷ lệ độ dài của đoạn đầu tiên trong polyline
  tập dữ liệu.valuelinepart2length = 0,4; //Tỷ lệ tối đa của độ dài của đoạn thứ hai trong đa tuyến
  tập dữ liệu.valuelinewidth = 1; // Độ dày của đa tuyến
  dataset.valuelinecolor = [uicolor màu nâu]; // màu đa tuyến
  dataset.valuelinevariablelength = có;
 
  //dữ liệu
  //piechartdata *data = [[piechartdata alloc] initwithxvals:xvals tập dữ liệu:bộ dữ liệu];
  piechartdata *data = [[phân bổ piechartdata] initwithdataset:dataset];
  nsnumberformatter *formatter = [[nsnumberformatter phân bổ] khởi tạo];
  formatter.numberstyle = kcfnumberformatterdecimalstyle; //nsnumberformatterphần trămkiểu;
  [bộ định dạng định dạng tích cực: @ "###,##0.00;" ];
  formatter.maximumfractiondigits = 2; //số thập phân
  formatter.multiplier = @1.f;
  formatter.paddingposition = kcfnumberformatterpadbeforesuffix;
  formatter.positivesuffix = @ "Nhân dân tệ" ;
  //[data setvalueformatter:formatter];//Đặt định dạng dữ liệu hiển thị
  [data setvaluetextcolor:[uicolor browncolor]];
  [giá trị tập dữ liệu phông chữ:[hệ thống phông chữ uifont kích thước:10]];
 
  trở lại dữ liệu;
}

Tóm tắt.

Trên đây là toàn bộ nội dung bài viết mong rằng nội dung bài viết có giá trị tham khảo nhất định cho quá trình học tập, làm việc của mọi người. Nếu có thắc mắc gì có thể để lại tin nhắn để trao đổi.

Link gốc: https://www.jianshu.com/p/dca81729531f.

Cuối cùng, bài viết về các ví dụ về cách vẽ biểu đồ đẹp trên iOS kết thúc tại đây. Nếu bạn muốn biết thêm về các ví dụ về cách vẽ biểu đồ đẹp trên iOS, vui lòng tìm kiếm bài viết CFSDN hoặc tiếp tục duyệt các bài viết liên quan. blog của tôi trong tương lai! .

25 4 0
Đề xuất bài viết: Phương pháp tạo chứng chỉ đẩy phía máy chủ iOS
Đề xuất bài viết: Giải thích chi tiết về phương pháp chèn sqlSessionFactory của MapperScannerConfigurer
Đề xuất bài viết: So sánh sự khác biệt về ngôn ngữ giữa MySQL và Oracle SQL
Đề xuất bài viết: Ví dụ về các phương pháp triển khai phép nhân và tối ưu hóa ma trận trong Java
qq735679552
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress