
- SwiftUI 教程
- SwiftUI - 首頁
- SwiftUI - 概述
- SwiftUI vs UIKit
- SwiftUI 環境
- SwiftUI - 環境設定
- SwiftUI - 基本元件
- SwiftUI - 構建第一個應用程式
- SwiftUI 檢視
- SwiftUI - 檢視
- SwiftUI - 自定義文字檢視
- SwiftUI - 自定義影像檢視
- SwiftUI - 堆疊
- SwiftUI 繪製形狀
- SwiftUI - 形狀
- SwiftUI - 繪製線條
- SwiftUI - 繪製矩形
- SwiftUI - 繪製圓角矩形
- SwiftUI - 繪製三角形
- SwiftUI - 繪製圓形
- SwiftUI - 繪製星形
- SwiftUI - 繪製多邊形
- SwiftUI - 繪製餅圖
- SwiftUI - 使用內建形狀
- SwiftUI - 文字
- SwiftUI - 文字檢視
- SwiftUI - 文字輸入和輸出
- SwiftUI - 顏色
- SwiftUI - 顏色
- SwiftUI - 顏色選擇器
- SwiftUI - 漸變
- SwiftUI - 調整顏色
- SwiftUI - 效果
- SwiftUI - 效果
- SwiftUI - 混合效果
- SwiftUI - 模糊效果
- SwiftUI - 陰影效果
- SwiftUI - 懸停效果
- SwiftUI - 動畫
- SwiftUI - 動畫
- SwiftUI - 建立動畫
- SwiftUI - 建立顯式動畫
- SwiftUI - 多個動畫
- SwiftUI - 轉場
- SwiftUI - 非對稱轉場
- SwiftUI - 自定義轉場
- SwiftUI - 圖片
- SwiftUI - 圖片
- SwiftUI - 圖片作為背景
- SwiftUI - 旋轉圖片
- SwiftUI - 媒體
- SwiftUI - 檢視佈局
- SwiftUI - 檢視佈局
- SwiftUI - 檢視大小
- SwiftUI - 檢視間距
- SwiftUI - 檢視填充
- SwiftUI - 列表和表格
- SwiftUI - 列表
- SwiftUI - 靜態列表
- SwiftUI - 動態列表
- SwiftUI - 自定義列表
- SwiftUI - 表格
- SwiftUI - 表單
- SwiftUI - 表單
- SwiftUI - 將表單分成多個部分
- SwiftUI 有用資源
- SwiftUI - 有用資源
- SwiftUI - 討論
SwiftUI - 繪製餅圖
餅圖是一種圓形圖表,用於以圓形形式顯示資料。此圖表被分成多個扇區,每個扇區代表一類資料,扇區的大小代表該類資料的數量或百分比。餅圖通常用於以非常簡單的形式顯示資料,以便使用者可以輕鬆比較整個圖表中的不同部分。餅圖包含以下元件:
- 扇區:它代表一類資料。
- 標籤:它用百分比值和類別名稱標記每個扇區。
- 圖例:它解釋每個扇區代表什麼。

SwiftUI 沒有提供任何直接建立餅圖的內建方法。因此,我們將使用addArc()方法和Zstack建立餅圖。其中 Zstack 用於建立不同顏色的扇區,addArc() 方法用於根據指定的半徑和角度計算起始點和結束點,然後它將在這些點之間建立曲線,然後將曲線插入路徑以建立所需的形狀。
語法
以下是語法:
func addArc(center: CGPoint, radius: CGFloat, startAngle: Angle, endAngle: Angle, clockwise: Bool, transform: CGAffineTransform = .identity)
引數
此函式採用以下引數:
- center: 此引數的座標表示圓弧的中心。
- radius: 此引數的座標表示圓弧的半徑。
- startAngle: 它表示圓弧起點的角度。它從正 x 軸計算。
- endAngle: 它表示圓弧終點的角度。它從正 x 軸計算。
- clockwise: 如果此引數的值設定為 true,則圓弧將順時針建立。否則,圓弧將逆時針建立。
- transform: 它用於在新增到路徑之前將變換應用於圓弧。預設情況下,它設定為恆等變換。
繪製餅圖
現在我們將開始繪製餅圖。為此,我們將使用以下問題陳述。假設 Mohan 對 100 人進行了關於最喜歡的蔬菜的調查,結果如下:
- 土豆:40%
- 豌豆:30%
- 西紅柿:20%
- 青椒:10%
現在我們將建立此調查的餅圖。根據資料,餅圖將包含四個不同顏色的四個扇區,每種顏色代表一種蔬菜,例如土豆代表橙色,豌豆代表綠色,西紅柿代表紅色,青椒代表藍色。因此,以下 SwiftUI 程式將使用 addArch() 方法和 Zstack 建立餅圖。
import SwiftUI struct ContentView: View { var body: some View { ZStack { Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: CGPoint(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: -90.0), endAngle: Angle(degrees: 54.0), clockwise: false) }.fill(Color.orange) Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: CGPoint(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 54.0), endAngle: Angle(degrees: 162.0), clockwise: false) }.fill(Color.green) Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: CGPoint(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 162.0), endAngle: Angle(degrees: 234.0), clockwise: false) }.fill(Color.blue) Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: CGPoint(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 234.0), endAngle: Angle(degrees: 270.0), clockwise: false) }.fill(Color.red) } } } #Preview { ContentView() }
輸出

我們可以自定義餅圖以使其更具吸引力。因此,我們在每個扇區上新增邊框和陰影。還在扇區中新增標籤。
import SwiftUI struct ContentView: View { var body: some View { ZStack { Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 54), clockwise: false) }.fill(Color.orange).overlay( Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 54), clockwise: false) }.stroke(Color.black, lineWidth: 2).overlay(Text("40%") .bold().foregroundColor(.white).offset(x: 50, y: -190))) Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 54), endAngle: Angle(degrees: 162), clockwise: false) }.fill(Color.green).overlay( Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 54), endAngle: Angle(degrees: 162), clockwise: false) }.stroke(Color.black, lineWidth: 2) ) Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 162), endAngle: Angle(degrees: 234), clockwise: false) } .fill(Color.blue) .overlay( Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 162), endAngle: Angle(degrees: 234), clockwise: false) }.stroke(Color.black, lineWidth: 2)) Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 234), endAngle: Angle(degrees: 270), clockwise: false) }.fill(Color.red).overlay( Path { aPath in aPath.move(to: CGPoint(x: 200, y: 200)) aPath.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 234), endAngle: Angle(degrees: 270), clockwise: false) }.stroke(Color.black, lineWidth: 2)) }.shadow(radius: 10) } } #Preview { ContentView() }
輸出

廣告