Swift Chartsの円グラフとインタラクティブ性の詳細

Swift Chartsの円グラフとインタラクティブ性の詳細

Swift Chartsは円を描きます。フレームワークへの最新の改善で、アプリで円グラフやドーナツグラフを作成する準備をしましょう。グラフをスクロール可能にする方法を学び、データの追加的な詳細を明らかにするためのグラフ選択APIを探索し、追加的なインタラクティブ性を有効にすることで、グラフをさらに楽しくする方法を見つけましょう。

関連する章
- 0:20 - Pie charts
- 4:22 - Selection
- 7:49 - Scrolling
リソース
- Visualizing your app’s data
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- 進化したScrollViewの詳細
- SwiftUIの新機能
ダウンロード

♪ ♪
こんにちは Richardです Swift Chartsのエキサイティングな新機能についてお話しできることを嬉しく思います円グラフ選択機能そしてスクロールです円グラフから始めましょう Swift Chartsはあらゆる種類のデータ視覚化を作成するための構成可能でカスタマイズ可能な構成要素を提供します Swift Chartsシリーズに新しく美しい円グラフが追加されました円グラフは合計値がさまざまなカテゴリにどのように構成されるかをシンプルで見慣れた図形で示しますこれは友人のフードトラックのパンケーキの販売データを視覚化したグラフです円グラフには軸がないため精度が重要ではないカジュアルな表示に最適ですどのように完全な円を構成するか広く理解すると部分と全体の関係を直感的に視覚化できます円グラフが好まれる重要な理由の1つは丸くて親しみやすい形状ですすでによく知っているマークベースの composition syntaxを使用して円グラフを作成できます新しいマークタイプ SectorMarkの導入です SectorMarkはパイのスライスを表しますそれは極空間に位置していますこの極ではなく極座標系です Sectorのサイズは Sectorが表す値に比例します半径に沿って Sectorの外観をカスタマイズできます内側の半径を大きくすると円グラフはドーナツグラフになります SectorMarkを使用するとあらゆる種類のグラフを簡単に作成できます例を示しましょう私の友人のパンケーキフードトラックビジネスでは日々の売上が大きく活性化して成長しました昨年は6種類のパンケーキを販売しましたこの夏私は彼らの販売アプリの改善を支援するという新たな課題に取り組みました
最も売れているスタイルのパンケーキを視覚化したグラフから始めますアプリには単純な積み上げ棒グラフが用意されていますこれにはBarMarkが付けられ売上はX次元に沿って積み上げられますカテゴリデータであるためカテゴリは各積み上げ棒のフォアグラウンドスタイルとして反映されますこのグラフで十分ですが画面上の空きスペースを活用するために円グラフに変換しましょうデータを目立たせることができます BarMarkと引数xを SectorMarkとangleに切り替えるだけですとても簡単です！
SectorMarkでは販売数量を表すために角度を使用します円グラフに指定した角度の値は完全な円に自動的に正規化されますスタイルのカスタマイズを適用することもできます angularInsetをSectorに設定して Sector間にギャップを作成できますここではSectorの角度インセットを 1.5 ポイントに設定しているため 2つのSector間のギャップはインセットの2倍で幅は3ポイントです角の半径も設定して円周がきれいに丸みを帯びるようにしましたわずか数行のコードだけで素晴らしいものになります別の外観を試すためにこれをドーナツグラフに変えましょう
内側の半径を円の全半径の比率に設定しました私にとって黄金比はちょうどいいように見えますがドーナツの厚さは別の方が好みかもしれません販売されたすべてのパンケーキの中で現在チャート上に表示されているのは断然の勝者cachapaですしかしドーナツグラフは中央が空洞になっているためテキストをグラフの中央に移動したいと考えています chartBackgroundにテキストを配置しますテキストがドーナツの穴の中央に配置されるようにいくつかの位置計算を使用します
これで見栄えの良いドーナツグラフが完成しましたこれが円グラフとドーナツグラフですデータに印象を与えるのに最適な方法であり大画面で見ると非常に美しいです次に「選択」によるグラフの双方向機能について詳しく説明したいと思いますグラフでインタラクティブ性を有効にすることで追加の詳細を徐々に開示することになりますインタラクティブ性によりユーザーはタッチなどのさまざまな形式の入力で自然にデータを探索することができます
「選択」はチャートと直接通信する方法です心拍数グラフなどの Appleが設計したグラフはその完璧な例です軸に沿って点を選択するとチャートに追加情報が表示されますこのアイデアをパンケーキ販売アプリに取り入れてみましょう
アプリ内の1つのグラフは 2つの都市の曜日ごとの平均売上高を視覚化します
このチャートで値の選択を有効にして選択日に販売されたパンケーキの数を示すポップオーバーによって詳細な販売数を表示します
このようにグラフが定義されます各都市にはデータシリーズがありますシリーズの各要素には曜日と販売数があります次に線は都市名によってスタイル設定されます chartOverlay modifierについてはすでにご存知かもしれませんこのmodifierでSwiftUIビューをオーバーレイしてジェスチャをキャプチャします iOS17では新しいchartXSelection modifierを使用できますすべてのジェスチャ認識を処理し選択した値をバインディングに保存します
選択modifierにより X軸に沿った生の日付値が得られるので私の折れ線グラフではそれをデータポイントと照合する計算プロパティを定義しますグラフを拡張して値が選択されたときにポップオーバーを表示しましょう
値を選択すると選択インジケーターとして縦罫マークを追加しますルールマークがラインマークの後ろに留まるように Zインデックスをデフォルトの 0値よりも低く設定しました次に選択インジケーターの上にポップオーバーを作成しましょうこれはカスタムSwiftUIビューを使用して注釈として行うことができます通常注釈はチャート内に配置されますがこの場合ポップオーバーはグラフの境界を越えて広がりますここで注釈のオーバーフロー解決が必要になります
X軸ではポップオーバーがグラフの水平方向の境界を越えないようグラフにフィットさせます Y軸では注釈がグラフのすぐ上に来るようにオーバーフロー解決を無効にします
選択バインディングと注釈付きのルールマークを使用するとこれで対話型の折れ線グラフが作成されました Swift ChartsはmacOSでの選択もサポートしており値選択のデフォルトはホバージェスチャです
単一の値の選択に加えてこのチャート選択modifierのバリアントでは範囲を選択できます iOSではデフォルトは2本指のタップジェスチャです macOSではこれはドラッグジェスチャです Swift ChartsではChartProxyを使いジェスチャの位置に基づいて値を選択できるよう選択用のカスタムジェスチャを提供できます
X座標とY座標のグラフ以外にもグラフ値の選択は円グラフやドーナツグラフでもシームレスに機能します Sectorをタップしてハイライト表示するのはとても楽しいです
選択とはチャート内の追加情報を明らかにすることがすべてでしたインタラクティブ性のもう1つの重要な部分はデータのナビゲーションですスクロールについて話しましょう
1年間の毎日のパンケーキの売上を視覚化するグラフを作成したいと思います 365日すべてを画面に収めることは非現実的なのでスクロール可能にする必要がありますそれにはchartScrollableAxes modifierを呼び出します chartXVisibleDomain を使用して時間間隔として 30日間の表示ウィンドウを設定します現在表示されているドメインでパンケーキの総売上を表示するには chartScrollPositionを使用して現在の日付をバインディングに保存しますこれで指を使ってスクロールできるようになりました
プロットをスクロールできるだけでなく軸のコンテンツも一緒にスクロールでき非常にスムーズですスクロールはいくつかの方法でカスタマイズできますたとえばスクロールを常に日付単位にスナップしたいとしますこれによりスクロール動作が始まります ScrollTargetBehaviorは SwiftUIおよびSwift Charts に新しく追加されスクロールビューのコンテンツを値に揃えます
私が望んでいたスナップ動作については 1日の最初の時間に合わせて設定しました majorAlignmentはスワイプ動作を定義することでさらに一歩カスタマイズしますここでは月の最初の日に設定することでスワイプしてチャートのページを移動してもいつも毎月1日に戻っています
スクロール可能なグラフは最新の機能強化の一部に基づいて構築され SwiftUIでビューをスクロールします詳細については「Beyond ScrollViews」を必ずご確認ください Swift Chartはデータを視覚化する無限の可能性を提供します X座標とY座標のグラフを超えて円グラフもAPIシリーズの一部になり Appleが設計したグラフを作成します円グラフはシンプルかつ強力な視覚化ですデータの一部と全体の関係を表す場合に最も効果的です選択やスクロールなどの双方向機能によりデータの視覚化にまったく新しい次元が可能になりますユーザーは運転席に座ってデータを探索できますパイやドーナツのグラフをおいしく味わってください ♪ ♪

Chart(data, id: \.name) { element in
  BarMark(
    x: .value("Sales", element.sales),
    stacking: .normalized
  )
  .foregroundStyle(by: .value("Name", element.name))
}
.chartXAxis(.hidden)

2:44 - Pie chart

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales)
  )
  .foregroundStyle(by: .value("Name", element.name))
}

3:05 - Pie chart with angular inset

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    angularInset: 1.5
  )
  .foregroundStyle(by: .value("Name", element.name))
}

3:06 - Pie chart with corner radius

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
}

3:33 - Donut chart

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    innerRadius: .ratio(0.618),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
}

4:02 - Donut chart with text in the center

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    innerRadius: .ratio(0.618),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
}
.chartBackground { chartProxy in
  GeometryReader { geometry in
    let frame = geometry[chartProxy.plotAreaFrame]
    VStack {
      Text("Most Sold Style")
        .font(.callout)
        .foregroundStyle(.secondary)
      Text(mostSold)
        .font(.title2.bold())
        .foregroundColor(.primary)
    }
    .position(x: frame.midX, y: frame.midY)
  }
}

5:14 - Chart visualizing average sales by city

struct LocationDetailsChart: View {
  ...

  var body: some View {
    Chart {
      ForEach(data) { series in
        ForEach(series.sales, id: \.day) { element in
          LineMark(
            x: .value("Day", element.day, unit: .day),
            y: .value("Sales", element.sales)
          )
        }
        .foregroundStyle(by: .value("City", series.city))
        .symbol(by: .value("City", series.city))
        .interpolationMethod(.catmullRom)
      }
    }
    ...
  }
}

5:39 - Chart selection modifier

struct LocationDetailsChart: View {
  @Binding var rawSelectedDate: Date?

  var body: some View {
    Chart {
      ForEach(data) { series in
        ForEach(series.sales, id: \.day) { element in
          LineMark(
            x: .value("Day", element.day, unit: .day),
            y: .value("Sales", element.sales)
          )
        }
        .foregroundStyle(by: .value("City", series.city))
        .symbol(by: .value("City", series.city))
        .interpolationMethod(.catmullRom)
      }
    }
    .chartXSelection(value: $rawSelectedDate)
  }
}

5:47 - Processing raw selected date from chart selection binding

struct LocationDetailsChart: View {
  @Binding var rawSelectedDate: Date?

  var selectedDate: Date? {
    guard let rawSelectedDate else { return nil }
    return data.first?.sales.first(where: {
      let endOfDay = endOfDay(for: $0.day)
      return ($0.day ... endOfDay).contains(rawSelectedDate)
    })?.day
  }

  var body: some View {
    Chart {
      ForEach(data) { series in
        ForEach(series.sales, id: \.day) { element in
          LineMark(
            x: .value("Day", element.day, unit: .day),
            y: .value("Sales", element.sales)
          )
        }
        .foregroundStyle(by: .value("City", series.city))
        .symbol(by: .value("City", series.city))
        .interpolationMethod(.catmullRom)
      }
    }
    .chartXSelection(value: $rawSelectedDate)
  }
}

6:06 - Rule mark as selection indicator

Chart {
  ForEach(data) { series in
    ForEach(series.sales, id: \.day) { element in
      LineMark(
        x: .value("Day", element.day, unit: .day),
        y: .value("Sales", element.sales)
      )
    }
  }
  if let selectedDate {
    RuleMark(
      x: .value("Selected", selectedDate, unit: .day)
    )
    .foregroundStyle(Color.gray.opacity(0.3))
    .offset(yStart: -10)
    .zIndex(-1)
  }
}
.chartXSelection(value: $rawSelectedDate)

6:20 - Selection popover

Chart {
  ForEach(data) { series in
    ForEach(series.sales, id: \.day) { element in
      LineMark(
        x: .value("Day", element.day, unit: .day),
        y: .value("Sales", element.sales)
      )
    }
  }
  if let selectedDate {
    RuleMark(
      x: .value("Selected", selectedDate, unit: .day)
    )
    .foregroundStyle(Color.gray.opacity(0.3))
    .offset(yStart: -10)
    .zIndex(-1)
    .annotation(
      position: .top, spacing: 0,
      overflowResolution: .init(
        x: .fit(to: .chart),
        y: .disabled
      )
    ) {
      valueSelectionPopover
    }
  }
}
.chartXSelection(value: $rawSelectedDate)

7:07 - Range selection

Chart(data) { series in
  ForEach(series.sales, id: \.day) { element in
    LineMark(
      x: .value("Day", element.day, unit: .day),
      y: .value("Sales", element.sales)
    )
  }
  ...
}
.chartXSelection(value: $rawSelectedDate)
.chartXSelection(range: $rawSelectedRange)

7:22 - Overriding default selection gesture

Chart(data) { series in
  ForEach(series.sales, id: \.day) { element in
    LineMark(
      x: .value("Day", element.day, unit: .day),
      y: .value("Sales", element.sales)
    )
  }
  ...
}
.chartXSelection(value: $rawSelectedDate)
.chartGesture { proxy in
  DragGesture(minimumDistance: 0)
    .onChanged { proxy.selectXValue(at: $0.location.x) }
    .onEnded { _ in selectedDate = nil }
}

7:31 - Selection in pie charts and donut charts

Chart(data, id: \.name) { element in
  SectorMark(
    angle: .value("Sales", element.sales),
    innerRadius: .ratio(0.618),
    angularInset: 1.5
  )
  .cornerRadius(5)
  .foregroundStyle(by: .value("Name", element.name))
  .opacity(element.name == selectedName ? 1.0 : 0.3)
}
.chartAngleSelection(value: $selectedAngle)

7:54 - Daily sales chart

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}

8:07 - Daily sales chart with a scrollable axis

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)

8:11 - Setting the visible domain for a scrollable chart

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)

8:18 - Chart scroll position

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)
.chartScrollPosition(x: $scrollPosition)

8:50 - Snapping in a scrolling chart

Chart {
  ForEach(SalesData.last365Days, id: \.day) {
    BarMark(
      x: .value("Day", $0.day, unit: .day),
      y: .value("Sales", $0.sales)
    )
  }
  .foregroundStyle(.blue)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 3600 * 24 * 30)
.chartScrollPosition(x: $scrollPosition)
.chartScrollTargetBehavior(
  .valueAligned(
    matching: DateComponents(hour: 0),
    majorAlignment: .matching(DateComponents(day: 1))))

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23