Swift Charts: より高いレベルへ

Swift Charts: より高いレベルへ

データの視覚化を深く掘り下げます：Swift ChartやSwiftUIが、さまざまなグラフオプションを使用して、複雑なデータセットをAppで表示する仕組みをご確認ください。さまざまな種類のデータをプロットしたり、マークを作成したりして、詳細なグラフを作成する方法を紹介します。また、Swift Chartsの広範なグラフのカスタマイズAPIについても解説します。これにより、グラフのスタイルをご利用のAppにマッチさせることが可能になります。このセッションを最大限に活用するには、WWDC22の「Swift Chartsの紹介」をまずご確認ください。

リソース
関連ビデオ

Tech Talks
- エンタープライズデベロッパ向けの最新情報
WWDC22
ダウンロード

♪ヒップホップ音楽♪ ♪ こんにちは Donghaoです本セッションでは Swift Chartsによる優れたデータの視覚化の実現方法について解説します言い換えれば Appでグラフを使ってできることの基準をより高くできればと思います優れたデータの視覚化により Appはより有益にそしてより魅力的なものになります Appで優れたグラフを作成するために考慮すべきことはたくさんありますもちろん基礎となるデータを忠実に伝えられ誰もがアクセス可能なグラフを作りたいですねですが App内のグラフが孤立していてはいません Appのユーザーインターフェイスの一部となりますローカリゼーションやダークモード等の OS機能サポートが必要ですグラフに対しUIの残りの部分とシームレスにフィットする適切なレイアウトが必要です画面サイズダイナミックタイプなどのサポートも必要ですすべてのプラットフォームで機能する必要もあり素晴らしいアニメーションと最高の見た目も欲しいですね Swift Chartsはこういった基本的な機能の多くを自動で処理するのでユーザーは独自のデータの伝達に関してや最良のグラフの作成そして優れたアクセスの実現に集中することができます Swift Chartsは SwiftUIのような宣言型構文を使ってこれらを実現します少量のコードでグラフに必要なものを指定すれば Swift Chartsが自動的に素晴らしいグラフを作成します Swift Chartsにはカスタマイズオプションのセットも豊富なので App独自のスタイルにも対応することができますこのセッションは Swift Chartsをより深く理解していただくためのものですまずは宣言型構文の基本的な構成要素について説明しますつまりマークとマークの構成についてですこれはApple製品でグラフを使ったいくつかの例ですご覧のとおり様々なデータやグラフのタイプスタイルがあります予め構成済みの要素を提供する代わりに Swift Chartsはグラフのタイプごとに構成を適用していくという考えに基づいて構築されています少数の基本的な構成要素を提供し様々な方法でそれらを組み合わせることで様々なグラフを作成することができますではどのように機能するかをお見せしましょう例を使って見てみましょうチームメートは皆パンケーキが大好きなので多くの種類のパンケーキを売るフードトラックの注文を追跡する Appがありますこれが過去30日間で販売されたパンケーキの数を種類別に分類して示すグラフですこれは棒グラフとして広く知られています Swift Chartsは 6つの青い長方形をそれぞれマークとみなしますマークとはデータを表すグラフィック要素ですこれは過去30日間に販売されたカチャパの数を示すバーマークですこのグラフには 6つのバーマークがありそれぞれがパンケーキのスタイルと対応する売上数を示していますこれがコードでどう書かれているかを見てみますここには「最も売れた商品カチャパ」など説明的なタイトルを含むSwiftUI ビューと空のグラフがありここでのChart型はトップレベルのビューで単一のグラフを定義しています他のビューを追加するのと同様に SwiftUIベースのApp同様にグラフを追加できます残りはグラフに焦点を当てていきましょうグラフにマークを追加しますここにカチャパとその売上数を示す一本のバーマークがありますこれからバーマークが付いたグラフが一つ作成されますスクリーンショットで見ると残りのグラフがユーザーインターフェイスにうまくフィットしていて素晴らしいデフォルトのスタイルになっています例えば X軸の数値は整数で表示されています別の名前と売上のバーマークを追加すると 2本目の棒が表示されますこれを繰り返して棒を追加していきます実際のAppではこれらのマークはおそらくプログラムで生成されますこれを行うには構造体またはタプルの配列をグラフに提供し ForEachを使って各要素の値でバーマークを作成しますこのように ForEachが唯一のコンテンツの場合 Chartに直接データを入れることもできます多くをSwiftUIモディファイアをマークに使用できます例えば.foregroundStyle モディファイアを使って棒の色を設定することができますここでは名前付きの色に設定しましたこれはXcodeで名前付きアセットとして作成できます誰でもグラフにアクセスできることは非常に重要ですデフォルトでは自動生成のアクセシビリティ要素で VoiceOverユーザーへのアクセスを提供しますこれは.accessibilityLabelと accessibilityValueモディファイアでカスタマイズが可能です例えばここではラベルをパンケーキの名前そして「を販売」を売上の数値に設定しますするとVoiceOverユーザー向けのカスタム体験となります VoiceOver：カチャパ 916を販売インジェラ 850を販売クレープ 802を販売このAppは数日にかけて販売されたパンケーキの数も追跡しますここでは過去30日間で販売されたパンケーキの数を表示していますグラフで日ごとの詳細なビューが表示できますこのグラフの作り方を見てみましょうここに曜日と売上のデータ配列があります曜日は一日の始まりの Date値で表されますバーマークでデータを視覚化し Xは曜日そしてこの単位パラメーターは Date値で暦日の期間を表すことを意味しています Yはその日の売上を示していますすると右のように数日間に渡る売上を示す棒グラフが表示されましたこのデータを視覚化する方法は棒グラフ以外にもあります折れ線グラフを試してみましょう唯一の変更点は BarMarkをLineMarkに置き換えることです Swift Chartsでは宣言型構文を使うとグラフタイプ間の切替が非常に簡単になります前のグラフは時間の経過に伴う総売上高を示していますでもフードトラックは2つの都市で運営しています平日どこへ行くかを決めるため 2つの都市の売上高を比較したいと思いますこの線は月曜から日曜までの売上を示しています各線は都市を表しますどのように組み立てられているか見てみましょうここに2つの都市のデータがあるとしますここではタプルの配列で定義されていますそれぞれに都市名と平日の売上が含まれています次にseriesDataをループする ForEachを使って前の折れ線グラフをラップします 2つの都市を区別するため .foregroundStyle(by:) モディファイアを使って都市名で2つのラインのスタイルを設定しますご覧のとおり Swift Chartsは自動的に 2色を選択して 2つの都市に色を付けますそして各色の意味を示す凡例を追加しますデフォルトの色は区別しやすいシステムカラーが選択されます色覚異常の人にも読みやすくするためさらに差別化するにはラインにシンボルを追加することもできますこれには.symbol(by:) モディファイアを追加しデータには都市を使用します最後にラインを滑らかに見せるために interpolationMethodを使って曲線にすることもできます 2つ配列の折れ線グラフでもバーマークに戻って見え方を確認することができますマークタイプを BarMarkに変更し棒に関係のないモディファイアを削除すると積み上げ棒グラフになります棒が自動的に積み重なるのは毎月2つの棒があるからです積み上げ棒グラフは 2つの都市の合計売上高を表示するのに最適ですが 2つの都市間の比較にはあまり適していません比較しやすくするために .position(by:)モディファイアを使ってグループ化した棒グラフに変換しますバーマークとラインマークを見てきましたが他にもポイントマークやエリアマークルールマークレクタングルマークなどのマークタイプをサポートしています組み合わせればより複雑なグラフが作成できます例を見てみましょう毎月の1日の平均売上高を示す折れ線グラフから始めましょう平均は便利ですがより極端な値によるヒントを得るため 1日の最小売上と最大売上も確認したいと思いますこれらの値をデータに追加して始めましょうデータ配列内の各要素に毎日の最小値と最大値を導入します次に最小値と最大値をエリアマークで視覚化しますここでXは月を示していて Yは毎日の最小値から始まり毎日の最大値で終了しますすると1日の平均値を示す折れ線グラフが作られて毎日の最小値と最大値がラインの周りの領域となって表示されますこの種のデータを視覚化する方法はラインとエリアだけではありません簡単に他のマークタイプに切り替えてより多くのデザインオプションを探ることができますここではBarMarkを使いますですが線が棒とうまくフィットしていないようですラインマークを 2点の高さをもつレクタングルマークに変更しましょうするとレクタングルマークは平均値を示す棒の内側に水平線を作成しますこのマークの幅を調整することもできますここでは例えば .6の比率で幅を設定していますこれは棒と長方形の幅が 1か月の幅の 60％になることを意味することがスクリーンショットから分かりますね最後にすべての月における 1日の平均売上を表示するオプションが欲しいですねそれにはまず foregroundStyleを薄いグレーにして目立たなくさせます次に平均値を示すYで ForEachの外側にルールマークを追加しますこれにより水平方向のルールが追加されますルールが年平均を示していることを明確にするために .annotationモディファイアを使ってルールに注釈を追加することができこれによりルールマークの上部に前方方向に揃えられたテキストラベルが追加されます構成によるグラフ作成についていくつか例を挙げて説明しましたこれらの基本的なマークの使い方や組み合わせ方には様々な方法があります例えば箱ひげ図複数系列の折れ線グラフ人口ピラミッド範囲プロットストリームグラフ多配列散布プロットヒートマップやベクトルフィールドのプロットなどですこれらはSwift Chartsで作成できる様々なグラフのほんの一例ですでは次のトピックに移りましょうマークプロパティを使ったデータのプロット方法です Swift Chartsは量的名目的そして時間的の主要な3タイプのデータをサポートしています量的データは数値で販売された製品の数部屋の温度や株の価格などが当てはまります Swift ChartsはIntやFloat Doubleのような Swiftの数値タイプを量的データとして扱います名目データまたはカテゴリデータは個別のカテゴリまたはグループを表します例えば人の名前や大陸または製品の種類などです文字列やカスタム文字列値の列挙型を名目データとして使用できます時間的データはある時点または時間の間隔を表します例えば特定の日の期間またはトランザクションの正確な時間などです Swift Chartsは日付を時間データとして扱いますグラフは売上高のような抽象データをマークのプロパティに変換することによって機能します X YとForeground Style プロパティを使ってデータをプロットできる BarMarkを見てみましょうこの例ではX属性のある量的な売上高を Y属性のある名目的データつまり名前を使ってプロットします結果としてグラフは横棒で構成され Xには売上高 Yには名前がそれぞれ表示されます名前と売上高を入れ替えると名前がXで売上高がY そして横棒ではなく縦棒のグラフになりますご覧のとおり BarMarkの動作は XとYプロパティにプロットされたデータによって異なります棒の向きは量的プロパティがどこにあるかに応じて変わります次にデータのプロットに 3つのプロパティすべてを含む別のグラフを見てみましょうここでは時間的データ平日をX Yに販売高と Foreground Styleで都市をプロットしますするとX軸は平日 Y軸は売上を示し都市ごとに色分けされた積み上げ棒グラフになります Swift Chartsには 6つのマークタイプとデータをプロットできる 6つのマークプロパティがありますデータには3種類あることを覚えていますねつまり考えられる組合わせは膨大な数になりますこれが Swift Chartsが少数の基礎的要素で幅広いグラフデザインをサポートできる理由です例えば Yを売上高としたマークプロパティを使ってデータをプロットする場合 Swift Chartsは抽象データをプロパティの適切な値に変換するマッピングを作成しますこの場合売上高を画面空間のY座標に変換します売上などの抽象的データから Yポジションのようなマークプロパティまでのマッピングを指して「スケール」という用語を使いますスケールはデータ値を取ってプロパティ値を返す関数と考えることができます例えばこれは売上を受け取ってバーのY位置を返す Yスケールの関数です「スケール」という名前は位置プロパティの場合入力値を何らかの係数でスケーリングして適切な画面座標に変換することが多いことに由来していますマークプロパティでデータをプロットする場合データを変換するためのスケールは対応するマークプロパティに作成されます例えばこのグラフには 3つのスケールがありますそれぞれが平日をXに売上をYに変換しますそして都市は Foreground Styleに変換しますデフォルトではデータから自動的にスケールを推測するので設定なしに優れたグラフが完了しますグラフのスケールを設定するには scaleモディファイアを使いますいくつか例を見てみましょうこの例では Yスケールは自動的にゼロから150であると推測されていますでも現在の売上がどうであっても Yスケールが常に一貫するように Yスケールを修正したいと思います Yスケールが常にゼロで始まり 200で終わるように変更してみましょうそれには.chartYScale モディファイアを使ってスケールのドメインをゼロから200に設定しますご覧のとおり軸がゼロから 200になりました同様に 2つの都市のマッピングを変更するには .chartForegroundStyleScale モディファイアを使えば Foreground Styleに適用できますこれで 2つの都市に新しい色がつきましたこれでマークの作成方法とマークプロパティを使ったデータのプロット方法がわかりました Swift Chartsに含まれる他のカスタマイズオプションを詳しく見ていきましょうグラフは軸場合によっては凡例そしてプロット領域で構成されています軸と凡例はグラフの解釈に役立ちますプロット領域とは 2つの軸の間の領域でマークによってデータをプロットする場所ですこれはすべてSwift Chartsでカスタマイズが可能ですまずは軸と凡例をカスタマイズする方法の例をいくつか見てみましょうこれは月間総売上高を示すグラフです Swift Chartsはカスタマイズをしなくても丸められた値を使った軸をデフォルトで生成します現在 X軸には四半期ごとのラベルが表示されています 1文字の月のラベルで毎月表示するように変更しましょうまず.chartXAxisモディファイアを追加します AxisMarksをコンテンツとして X軸をカスタマイズしますパラメータのないAxisMarksはデフォルト軸を再作成します軸の値を変更することから始めましょう定期的な暦日での間隔が必要なので標準ライブラリの stride関数と同様に stride(by:)を使うことができますこれで毎月のラベルができましたでもスクリーンショットで見るとデフォルトのラベルは密集しすぎて見じます十分なスペースがないため一部のラベルが切れていますラベル形式を 1文字に変更してみましょうそれには個々のコンポーネントから Axisマークを作成しますつまり AxisGridLine AxisTick AxisValueLabelです月の名前が短くなるようラベル形式を設定しましょうこれで毎月の名前が 1文字になりました結果のビルダーへ渡される値パラメータが現在の軸の値に関する情報を提供しますこれを使用すると Axisマークの存在とスタイルを条件付きで決定できます例えば日付としての値が月の第1四半期かどうかをテストする条件がありますそうである場合は各四半期の最初の月を別のForeground Styleで強調表示しますそうでない場合は目盛りとラベルのないグリッド線のみを表示します今は四半期を表示しているので形式を四半期スタイルに変更しましょう今行ったカスタマイズではサブグリッド線が毎月表示されたよりユニークなX軸を示す四半期データとなります値に加えて Axisマークには一般的な外観とスタイルを構成する他の属性があります Y軸をデフォルトの後ろ側ではなくグラフの前側に表示したいとしましょうその場合は positionパラメータをleadingに設定して前側に移動させます Swift Chartsは軸と視覚化するデータタイプに基づき Axisマークのプリセットをデフォルト設定しますプリセットパラメータでデフォルトを上書きできますここではY軸が残りのユーザーインターフェイスと視覚的に合うように .extendedプリセットを使用していますグラフによっては軸の表示をしたくない場合があります例えばここでの売上高グラフの目的は見る人に簡単な概要を伝えることなので実際のところ軸は必要ありません .hiddenをChart Axis モディファイアに渡して軸を非表示にしましょう凡例の構成は軸の構成に似ています例えば最高の日と場所を強調するこのグラフではすでに不透明度で最高の都市を強調しています自動生成された凡例は非表示にしましょうそれには.chartLegend モディファイアを追加しパラメータには .hiddenを使用しますそれではプロット領域についてお話しましょうグラフのプロット領域を構成するには chartPlotStyleモディファイアを使用します後ろのクロージャでは元のプロット領域を取り変更されたプロット領域を返す関数を書きますいくつか例を見てみましょう場合によっては正確なサイズまたは比率のプロット領域が必要になることがあります例えばこの場合グラフ内のカテゴリの数によって駆動されるプロット領域の高さが必要ですこれにはプロット領域に .frameモディファイアを適用し変更されたプロット領域を返すとプロット領域の高さが設定されますモディファイアで特殊視覚効果を実現することもできますこのダークモードグラフでは .backgroundモディファイアを使ってピンクの背景を追加して不透明度を.2にしてグラフを少し目立たせます次に1ポイントの同じ色で境界線を追加するとグラフに独自の視覚効果が作成されます前半でスケールについて触れましたこれはXやYなどのプロパティに対しデータ値をマップする関数でしたね Swift Chartsは XとYスケールへのアクセスを可能にする ChartProxyを提供します特定のデータ値の位置を取得するには ChartProxyの position(for:)メソッドまたはvalue(at:) メソッドを使用して指定の位置のデータ値を取得しますすると他のビューをグラフと調整できます例を見てみましょうインタラクティブな分析ビューを作りましょうここをドラッグジェスチャでグラフから間隔を選択すると詳細ビューで行をフィルタリングするために使用されます .chartOverlayまたは .chartBackgroundモディファイアからproxyオブジェクトが取得できますこの2つのモディファイアは SwiftUIのoverlayと backgroundモディファイアに似ていますが Chart Proxyを提供してくれますこの例を作成するには前と同様にベースのグラフを定義することから始めますその後Chart Proxyを提供する.chartOverlay モディファイアを追加します中にはオーバーレイビューのジオメトリにアクセスを可能にするジオメトリリーダーがあります次にSwiftUIのDragGestureに応答するように構成された長方形ビューがありますドラッグジェスチャが発生するとまずはグラフのプロット領域内にある開始と現在の場所の X座標が見つかりますこれはプロット領域の原点を差し引くことによってジェスチャによって提供される場所から行われますこの座標を取得したら Chart Proxyを使用できます対応する日付値を見つけるには最後に現在の日付間隔を追跡する SwiftUIステートに設定します範囲のステートを使用すると現在選択されている日付範囲を視覚化するための長方形マークを定義できますこの状態は Appの他のパーツを制御するためにも使えます例えばグラフの下の詳細ビューのコンテンツをフィルタリングする場合などですこれはChart Proxyがどのように機能するかを説明する簡単な例ですこれを使うと多くの興味深い機能を構築できます例えばこのインタラクティブグラフではロリポップのようなオーバーレイで選択した日と売上高が表示されますこのセッションではマークを作成してグラフを作成する方法マークプロパティを使ってデータをプロットする方法グラフをカスタマイズする方法を見てきましたグラフを使った優れたエクスペリエンスの実現と効果的なグラフのデザイン方法の詳細についてはデザインセッションにアクセスしてください Swift Chartsを使ったデータの視覚化構築が好きになると思いますご視聴ありがとうございました ♪

import SwiftUI
import Charts

struct TopStyleChart: View {
    let data = [
        (name: "Cachapa", sales: 916),
        (name: "Injera", sales: 850),
        (name: "Crêpe", sales: 802),
        (name: "Jian Bing", sales: 753),
        (name: "Dosa", sales: 654),
        (name: "American", sales: 618)
    ]

    var body: some View {
        Chart(data, id: \.name) {
            BarMark(
                x: .value("Sales", $0.sales),
                y: .value("Name", $0.name)
            )
            // Set the foreground style of the bars.
            .foregroundStyle(.pink)
            // Customize the accessibility label and value.
            .accessibilityLabel($0.name)
            .accessibilityValue("\($0.sales) sold")
        }
    }
}

5:12 - Daily sales chart

struct DailySalesChart: View {
    var body: some View {
        Chart {
            ForEach(dailySales, id: \.day) {
                // Try change to LineMark.
                BarMark( 
                    x: .value("Day", $0.day, unit: .day),
                    y: .value("Sales", $0.sales)
                )
            }
        }
    }
  
    let dailySales: [(day: Date, sales: Int)] = [
        (day: date(year: 2022, month: 5, day: 8), sales: 168),
        (day: date(year: 2022, month: 5, day: 9), sales: 117),
        (day: date(year: 2022, month: 5, day: 10), sales: 106),
        (day: date(year: 2022, month: 5, day: 11), sales: 119),
        (day: date(year: 2022, month: 5, day: 12), sales: 109),
        (day: date(year: 2022, month: 5, day: 13), sales: 104),
        (day: date(year: 2022, month: 5, day: 14), sales: 196),
        (day: date(year: 2022, month: 5, day: 15), sales: 172),
        (day: date(year: 2022, month: 5, day: 16), sales: 122),
        (day: date(year: 2022, month: 5, day: 17), sales: 115),
        (day: date(year: 2022, month: 5, day: 18), sales: 138),
        (day: date(year: 2022, month: 5, day: 19), sales: 110),
        (day: date(year: 2022, month: 5, day: 20), sales: 106),
        (day: date(year: 2022, month: 5, day: 21), sales: 187),
        (day: date(year: 2022, month: 5, day: 22), sales: 187),
        (day: date(year: 2022, month: 5, day: 23), sales: 119),
        (day: date(year: 2022, month: 5, day: 24), sales: 160),
        (day: date(year: 2022, month: 5, day: 25), sales: 144),
        (day: date(year: 2022, month: 5, day: 26), sales: 152),
        (day: date(year: 2022, month: 5, day: 27), sales: 148),
        (day: date(year: 2022, month: 5, day: 28), sales: 240),
        (day: date(year: 2022, month: 5, day: 29), sales: 242),
        (day: date(year: 2022, month: 5, day: 30), sales: 173),
        (day: date(year: 2022, month: 5, day: 31), sales: 143),
        (day: date(year: 2022, month: 6, day: 1), sales: 137),
        (day: date(year: 2022, month: 6, day: 2), sales: 123),
        (day: date(year: 2022, month: 6, day: 3), sales: 146),
        (day: date(year: 2022, month: 6, day: 4), sales: 214),
        (day: date(year: 2022, month: 6, day: 5), sales: 250),
        (day: date(year: 2022, month: 6, day: 6), sales: 146)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: .init(year: year, month: month, day: day)) ?? Date()
}

6:16 - Sales by location with line mark

struct LocationsChart: View {
    var body: some View {
        Chart {
            ForEach(seriesData, id: \.city) { series in
                ForEach(series.data, id: \.weekday) {
                    LineMark(
                        x: .value("Weekday", $0.weekday, unit: .day),
                        y: .value("Sales", $0.sales)
                    )
                }
                .foregroundStyle(by: .value("City", series.city))
                .symbol(by: .value("City", series.city))
                .interpolationMethod(.catmullRom)
            }
        }
    }

    let seriesData = [
        (
            city: "Cupertino", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 54),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 88),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 49),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 125),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 67)
            ]
        ),
        (
            city: "San Francisco", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 81),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 90),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 52),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 72),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 137)
            ]
        )
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

7:19 - Sales by location with bar mark

struct LocationsChart: View {
    var body: some View {
        Chart {
            ForEach(seriesData, id: \.city) { series in
                ForEach(series.data, id: \.weekday) {
                    BarMark(
                        x: .value("Weekday", $0.weekday, unit: .day),
                        y: .value("Sales", $0.sales)
                    )
                }
                .foregroundStyle(by: .value("City", series.city))
                .position(by: .value("City", series.city))
            }
        }
    }

    let seriesData = [
        (
            city: "Cupertino", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 54),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 88),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 49),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 125),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 67)
            ]
        ),
        (
            city: "San Francisco", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 81),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 90),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 52),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 72),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 137)
            ]
        )
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

8:02 - Monthly sales with line and area marks

struct MonthlySalesChart: View {
    var body: some View {
        Chart {
            ForEach(data, id: \.month) {
                AreaMark(
                    x: .value("Month", $0.month, unit: .month),
                    yStart: .value("Daily Min", $0.dailyMin),
                    yEnd: .value("Daily Max", $0.dailyMax)
                )
                .opacity(0.3)
                LineMark(
                    x: .value("Month", $0.month, unit: .month),
                    y: .value("Daily Average", $0.dailyAverage)
                )
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952, dailyAverage: 127, dailyMin: 95, dailyMax: 194),
        (month: date(year: 2021, month: 8), sales: 4044, dailyAverage: 130, dailyMin: 96, dailyMax: 189),
        (month: date(year: 2021, month: 9), sales: 3930, dailyAverage: 131, dailyMin: 101, dailyMax: 184),
        (month: date(year: 2021, month: 10), sales: 4217, dailyAverage: 136, dailyMin: 96, dailyMax: 193),
        (month: date(year: 2021, month: 11), sales: 4006, dailyAverage: 134, dailyMin: 104, dailyMax: 202),
        (month: date(year: 2021, month: 12), sales: 3994, dailyAverage: 129, dailyMin: 96, dailyMax: 190),
        (month: date(year: 2022, month: 1), sales: 4202, dailyAverage: 136, dailyMin: 96, dailyMax: 203),
        (month: date(year: 2022, month: 2), sales: 3749, dailyAverage: 134, dailyMin: 98, dailyMax: 200),
        (month: date(year: 2022, month: 3), sales: 4329, dailyAverage: 140, dailyMin: 104, dailyMax: 218),
        (month: date(year: 2022, month: 4), sales: 4084, dailyAverage: 136, dailyMin: 93, dailyMax: 221),
        (month: date(year: 2022, month: 5), sales: 4559, dailyAverage: 147, dailyMin: 104, dailyMax: 242),
        (month: date(year: 2022, month: 6), sales: 1023, dailyAverage: 170, dailyMin: 120, dailyMax: 250)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

8:46 - Monthly sales with bar and rectangle marks

struct MonthlySalesChart: View {
    var body: some View {
        Chart {
            ForEach(data, id: \.month) {
                BarMark(
                    x: .value("Month", $0.month, unit: .month),
                    yStart: .value("Daily Min", $0.dailyMin),
                    yEnd: .value("Daily Max", $0.dailyMax),
                    width: .ratio(0.6)
                )
                .opacity(0.3)
                RectangleMark(
                    x: .value("Month", $0.month, unit: .month),
                    y: .value("Daily Average", $0.dailyAverage),
                    width: .ratio(0.6),
                    height: 2
                )
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952, dailyAverage: 127, dailyMin: 95, dailyMax: 194),
        (month: date(year: 2021, month: 8), sales: 4044, dailyAverage: 130, dailyMin: 96, dailyMax: 189),
        (month: date(year: 2021, month: 9), sales: 3930, dailyAverage: 131, dailyMin: 101, dailyMax: 184),
        (month: date(year: 2021, month: 10), sales: 4217, dailyAverage: 136, dailyMin: 96, dailyMax: 193),
        (month: date(year: 2021, month: 11), sales: 4006, dailyAverage: 134, dailyMin: 104, dailyMax: 202),
        (month: date(year: 2021, month: 12), sales: 3994, dailyAverage: 129, dailyMin: 96, dailyMax: 190),
        (month: date(year: 2022, month: 1), sales: 4202, dailyAverage: 136, dailyMin: 96, dailyMax: 203),
        (month: date(year: 2022, month: 2), sales: 3749, dailyAverage: 134, dailyMin: 98, dailyMax: 200),
        (month: date(year: 2022, month: 3), sales: 4329, dailyAverage: 140, dailyMin: 104, dailyMax: 218),
        (month: date(year: 2022, month: 4), sales: 4084, dailyAverage: 136, dailyMin: 93, dailyMax: 221),
        (month: date(year: 2022, month: 5), sales: 4559, dailyAverage: 147, dailyMin: 104, dailyMax: 242),
        (month: date(year: 2022, month: 6), sales: 1023, dailyAverage: 170, dailyMin: 120, dailyMax: 250)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

9:19 - Monthly sales with average line and annotation

struct MonthlySalesChart: View {
    var body: some View {
        Chart {
            ForEach(data, id: \.month) {
                BarMark(
                    x: .value("Month", $0.month, unit: .month),
                    yStart: .value("Daily Min", $0.dailyMin),
                    yEnd: .value("Daily Max", $0.dailyMax),
                    width: .ratio(0.6)
                )
                .opacity(0.3)
                RectangleMark(
                    x: .value("Month", $0.month, unit: .month),
                    y: .value("Daily Average", $0.dailyAverage),
                    width: .ratio(0.6),
                    height: 2
                )
            }
            .foregroundStyle(.gray.opacity(0.5))

            RuleMark(
                y: .value("Average", averageValue)
            )
            .lineStyle(StrokeStyle(lineWidth: 3))
            .annotation(position: .top, alignment: .leading) {
                Text("Average: \(averageValue, format: .number)")
                    .font(.headline)
                    .foregroundStyle(.blue)
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952, dailyAverage: 127, dailyMin: 95, dailyMax: 194),
        (month: date(year: 2021, month: 8), sales: 4044, dailyAverage: 130, dailyMin: 96, dailyMax: 189),
        (month: date(year: 2021, month: 9), sales: 3930, dailyAverage: 131, dailyMin: 101, dailyMax: 184),
        (month: date(year: 2021, month: 10), sales: 4217, dailyAverage: 136, dailyMin: 96, dailyMax: 193),
        (month: date(year: 2021, month: 11), sales: 4006, dailyAverage: 134, dailyMin: 104, dailyMax: 202),
        (month: date(year: 2021, month: 12), sales: 3994, dailyAverage: 129, dailyMin: 96, dailyMax: 190),
        (month: date(year: 2022, month: 1), sales: 4202, dailyAverage: 136, dailyMin: 96, dailyMax: 203),
        (month: date(year: 2022, month: 2), sales: 3749, dailyAverage: 134, dailyMin: 98, dailyMax: 200),
        (month: date(year: 2022, month: 3), sales: 4329, dailyAverage: 140, dailyMin: 104, dailyMax: 218),
        (month: date(year: 2022, month: 4), sales: 4084, dailyAverage: 136, dailyMin: 93, dailyMax: 221),
        (month: date(year: 2022, month: 5), sales: 4559, dailyAverage: 147, dailyMin: 104, dailyMax: 242),
        (month: date(year: 2022, month: 6), sales: 1023, dailyAverage: 170, dailyMin: 120, dailyMax: 250)
    ]

    let averageValue = 137
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

13:54 - Chart with custom scales for Y and foreground style

struct LocationsChart: View {
    var body: some View {
        Chart {
            ForEach(seriesData, id: \.city) { series in
                ForEach(series.data, id: \.weekday) {
                    LineMark(
                        x: .value("Weekday", $0.weekday, unit: .day),
                        y: .value("Sales", $0.sales)
                    )
                }
                .foregroundStyle(by: .value("City", series.city))
                .symbol(by: .value("City", series.city))
                .interpolationMethod(.catmullRom)
            }
        }
        .chartYScale(domain: 0 ... 200)
        .chartForegroundStyleScale([
            "San Francisco": .orange,
            "Cupertino": .pink
        ])
    }
  
    let seriesData = [
        (
            city: "Cupertino", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 54),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 88),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 49),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 42),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 125),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 67)
            ]
        ),
        (
            city: "San Francisco", data: [
                (weekday: date(year: 2022, month: 5, day: 2), sales: 81),
                (weekday: date(year: 2022, month: 5, day: 3), sales: 90),
                (weekday: date(year: 2022, month: 5, day: 4), sales: 52),
                (weekday: date(year: 2022, month: 5, day: 5), sales: 72),
                (weekday: date(year: 2022, month: 5, day: 6), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 7), sales: 84),
                (weekday: date(year: 2022, month: 5, day: 8), sales: 137)
            ]
        )
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

15:16 - Chart with custom X axis

struct MonthlySalesChart: View {
    var body: some View {
        Chart(data, id: \.month) {
            BarMark(
                x: .value("Month", $0.month, unit: .month),
                y: .value("Sales", $0.sales)
            )
        }
        .chartXAxis {
            AxisMarks( values: .stride(by: .month) ) { value in
                AxisGridLine()
                AxisTick()
                AxisValueLabel(
                    format: .dateTime.month(.narrow)
                )
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952),
        (month: date(year: 2021, month: 8), sales: 4044),
        (month: date(year: 2021, month: 9), sales: 3930),
        (month: date(year: 2021, month: 10), sales: 4217),
        (month: date(year: 2021, month: 11), sales: 4006),
        (month: date(year: 2021, month: 12), sales: 3994),
        (month: date(year: 2022, month: 1), sales: 4202),
        (month: date(year: 2022, month: 2), sales: 3749),
        (month: date(year: 2022, month: 3), sales: 4329),
        (month: date(year: 2022, month: 4), sales: 4084),
        (month: date(year: 2022, month: 5), sales: 4559),
        (month: date(year: 2022, month: 6), sales: 1023)
    ]

    let averageValue = 137
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

16:17 - Chart with custom X axis and conditional content for axis marks

struct MonthlySalesChart: View {
    var body: some View {
        Chart(data, id: \.month) {
            BarMark(
                x: .value("Month", $0.month, unit: .month),
                y: .value("Sales", $0.sales)
            )
        }
        .chartXAxis {
            AxisMarks(values: .stride(by: .month)) { value in
                if value.as(Date.self)!.isFirstMonthOfQuarter {
                    AxisGridLine().foregroundStyle(.black)
                    AxisTick().foregroundStyle(.black)
                    AxisValueLabel(
                        format: .dateTime.month(.narrow)
                    )
                } else {
                    AxisGridLine()
                }
            }
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952),
        (month: date(year: 2021, month: 8), sales: 4044),
        (month: date(year: 2021, month: 9), sales: 3930),
        (month: date(year: 2021, month: 10), sales: 4217),
        (month: date(year: 2021, month: 11), sales: 4006),
        (month: date(year: 2021, month: 12), sales: 3994),
        (month: date(year: 2022, month: 1), sales: 4202),
        (month: date(year: 2022, month: 2), sales: 3749),
        (month: date(year: 2022, month: 3), sales: 4329),
        (month: date(year: 2022, month: 4), sales: 4084),
        (month: date(year: 2022, month: 5), sales: 4559),
        (month: date(year: 2022, month: 6), sales: 1023)
    ]

    let averageValue = 137
}

extension Date {
    var isFirstMonthOfQuarter: Bool {
        Calendar.current.component(.month, from: self) % 3 == 1
    }
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

17:00 - Chart with custom Y axis

struct MonthlySalesChart: View {
    var body: some View {
        Chart(data, id: \.month) {
            BarMark(
                x: .value("Month", $0.month, unit: .month),
                y: .value("Sales", $0.sales)
            )
        }
        .chartYAxis {
            AxisMarks( preset: .extended, position: .leading)
        }
    }

    let data = [
        (month: date(year: 2021, month: 7), sales: 3952),
        (month: date(year: 2021, month: 8), sales: 4044),
        (month: date(year: 2021, month: 9), sales: 3930),
        (month: date(year: 2021, month: 10), sales: 4217),
        (month: date(year: 2021, month: 11), sales: 4006),
        (month: date(year: 2021, month: 12), sales: 3994),
        (month: date(year: 2022, month: 1), sales: 4202),
        (month: date(year: 2022, month: 2), sales: 3749),
        (month: date(year: 2022, month: 3), sales: 4329),
        (month: date(year: 2022, month: 4), sales: 4084),
        (month: date(year: 2022, month: 5), sales: 4559),
        (month: date(year: 2022, month: 6), sales: 1023)
    ]

    let averageValue = 137
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

18:26 - Chart with plot area style

struct TopStyleChart: View {
    var body: some View {
        Chart(data, id: \.name) {
            BarMark(
                x: .value("Sales", $0.sales),
                y: .value("Name", $0.name)
            )
            // Set the foreground style of the bars.
            .foregroundStyle(.pink)
            // Customize the accessibility label and value.
            .accessibilityLabel($0.name)
            .accessibilityValue("\($0.sales) sold")
        }
        .chartPlotStyle { plotArea in
            plotArea.frame(height: 60 * 6)
                    .background(.pink.opacity(0.2))
                    .border(.pink, width: 1)
        }
    }

    let data = [
        (name: "Cachapa", sales: 916),
        (name: "Injera", sales: 850),
        (name: "Crêpe", sales: 802),
        (name: "Jian Bing", sales: 753),
        (name: "Dosa", sales: 654),
        (name: "American", sales: 618)
    ]
}

20:03 - Chart with brushing interaction

struct InteractiveBrushingChart: View {
    @State var range: (Date, Date)? = nil

    var body: some View {
        Chart {
            ForEach(data, id: \.day) {
                LineMark(
                    x: .value("Month", $0.day, unit: .day),
                    y: .value("Sales", $0.sales)
                )
                .interpolationMethod(.catmullRom)
                .symbol(Circle().strokeBorder(lineWidth: 2))
            }
            if let (start, end) = range {
                RectangleMark(
                    xStart: .value("Selection Start", start),
                    xEnd: .value("Selection End", end)
                )
                .foregroundStyle(.gray.opacity(0.2))
            }
        }
        .chartOverlay { proxy in
            GeometryReader { nthGeoItem in
                Rectangle().fill(.clear).contentShape(Rectangle())
                    .gesture(DragGesture()
                        .onChanged { value in
                            // Find the x-coordinates in the chart’s plot area.
                            let xStart = value.startLocation.x - nthGeoItem[proxy.plotAreaFrame].origin.x
                            let xCurrent = value.location.x - nthGeoItem[proxy.plotAreaFrame].origin.x
                            // Find the date values at the x-coordinates.
                            if let dateStart: Date = proxy.value(atX: xStart),
                               let dateCurrent: Date = proxy.value(atX: xCurrent) {
                                range = (dateStart, dateCurrent)
                            }
                        }
                        .onEnded { _ in range = nil } // Clear the state on gesture end.
                    )
            }
        }
    }

    let data: [(day: Date, sales: Int)] = [
        (day: date(year: 2022, month: 5, day: 8), sales: 168),
        (day: date(year: 2022, month: 5, day: 9), sales: 117),
        (day: date(year: 2022, month: 5, day: 10), sales: 106),
        (day: date(year: 2022, month: 5, day: 11), sales: 119),
        (day: date(year: 2022, month: 5, day: 12), sales: 109),
        (day: date(year: 2022, month: 5, day: 13), sales: 104),
        (day: date(year: 2022, month: 5, day: 14), sales: 196),
        (day: date(year: 2022, month: 5, day: 15), sales: 172),
        (day: date(year: 2022, month: 5, day: 16), sales: 122),
        (day: date(year: 2022, month: 5, day: 17), sales: 115),
        (day: date(year: 2022, month: 5, day: 18), sales: 138),
        (day: date(year: 2022, month: 5, day: 19), sales: 110),
        (day: date(year: 2022, month: 5, day: 20), sales: 106),
        (day: date(year: 2022, month: 5, day: 21), sales: 187),
        (day: date(year: 2022, month: 5, day: 22), sales: 187),
        (day: date(year: 2022, month: 5, day: 23), sales: 119),
        (day: date(year: 2022, month: 5, day: 24), sales: 160),
        (day: date(year: 2022, month: 5, day: 25), sales: 144),
        (day: date(year: 2022, month: 5, day: 26), sales: 152),
        (day: date(year: 2022, month: 5, day: 27), sales: 148),
        (day: date(year: 2022, month: 5, day: 28), sales: 240),
        (day: date(year: 2022, month: 5, day: 29), sales: 242),
        (day: date(year: 2022, month: 5, day: 30), sales: 173),
        (day: date(year: 2022, month: 5, day: 31), sales: 143),
        (day: date(year: 2022, month: 6, day: 1), sales: 137),
        (day: date(year: 2022, month: 6, day: 2), sales: 123),
        (day: date(year: 2022, month: 6, day: 3), sales: 146),
        (day: date(year: 2022, month: 6, day: 4), sales: 214),
        (day: date(year: 2022, month: 6, day: 5), sales: 250),
        (day: date(year: 2022, month: 6, day: 6), sales: 146)
    ]
}

func date(year: Int, month: Int, day: Int = 1) -> Date {
    Calendar.current.date(from: DateComponents(year: year, month: month, day: day)) ?? Date()
}

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

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

リソース

関連ビデオ

Tech Talks

WWDC22