• 2023/11/27
• 4分

【Swift UI】Charts(DGCharts)で円グラフを実装する方法！

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：15.0.1
• iOS：17.1
• Swift：5.9
• macOS：Sonoma 14.1

Swift UIで実装する

Charts(DGCharts)ライブラリをSwift UIで利用しつつ円グラフを実装する方法をまとめていきます。Swift UIで実装するためにUIViewRepresentableを使用していますが詳細な使用方法は以下の記事を参考にしてください。

円グラフの実装方法

今回は以下のような円グラフを実装していきます。

実装の詳細はコメントに残しておきました。

struct MyPieChartView: UIViewRepresentable {
  
    private let demoData: [String: Int] = [
        "Category1": 30,
        "Category2": 20,
        "Category3": 15,
        "Category4": 10,
    ]

  func makeUIView(context: Context) -> PieChartView {
      
      // チャートビューのサイズと位置を定義
      let chartView = PieChartView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
      
      // データがない場合の設定
      guard demoData.count != 0 else {
          chartView.noDataText = "データがありません"
          chartView.noDataTextColor = .red
          chartView.noDataFont = .boldSystemFont(ofSize: 15)
          return chartView
      }
      
      // チャートに渡す用の配列を定義
      var entries: [ChartDataEntry] = []
      
      // Y軸のデータリストからインデックスと値を取得し配列に格納
      for item in demoData {
          // X軸は配列のインデックス番号
          let entry = PieChartDataEntry(value: Double(item.value), label: item.key)
          entries.append(entry)
      }
      
      let dataSet = PieChartDataSet(entries: entries, label: "円グラフの名前")

      chartView.data = PieChartData(dataSet: dataSet)
      
      // カラーリストの設定 (既存の色は4色しかないため5個以上の際は自身で定義が必要)
      dataSet.colors = ChartColorTemplates.material() // or [UIColor]
      // グラフ内に値を表示しない
      dataSet.drawValuesEnabled = true
      // 値のテキストカラー
      dataSet.valueTextColor = .black
      // 値のテキストフォント
      dataSet.valueFont = .boldSystemFont(ofSize: 12)
      
      // グラフの値を％表示するかどうか
      chartView.usePercentValuesEnabled = false
      // グラフの中心まで塗りつぶす
      chartView.drawHoleEnabled = false
      // タッチでハイライトしない
      chartView.highlightPerTapEnabled = false
      // タッチで回転しないようにする
      chartView.rotationEnabled = false
      // グラフ内にラベルを表示しない
      chartView.drawEntryLabelsEnabled = false
      // ラベルの表示位置
      chartView.legend.horizontalAlignment = .center
      // ラベル非表示
      chartView.legend.enabled = true
        
      // アニメーション
      chartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)
      
      return chartView
  }

  func updateUIView(_ uiView: PieChartView, context: Context) { }

}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。