SwiftUI - 繪製餅圖



餅圖是一種圓形圖表,用於以圓形形式顯示資料。此圖表被分成多個扇區,每個扇區代表一類資料,扇區的大小代表該類資料的數量或百分比。餅圖通常用於以非常簡單的形式顯示資料,以便使用者可以輕鬆比較整個圖表中的不同部分。餅圖包含以下元件:

  • 扇區:它代表一類資料。
  • 標籤:它用百分比值和類別名稱標記每個扇區。
  • 圖例:它解釋每個扇區代表什麼。
Drawing Pie Chart

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()
}

輸出

Drawing Pie Chart

我們可以自定義餅圖以使其更具吸引力。因此,我們在每個扇區上新增邊框和陰影。還在扇區中新增標籤。

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()
}

輸出

Drawing Pie Chart
廣告