Hello Swift Charts

ハイライト

Swift Charts は、WWDC 2022 で Apple によってリリースされた宣言型チャートフレームワークで、完全に SwiftUI 構文に基づいています。 BarMark、LineMark、PointMark など、すべてのチャートタイプをマークの概念に統合し、SwiftUI でビューを組み合わせるのと同じように、これらのマークを組み合わせてチャートを構築します。 Session は、パンケーキ販売追跡アプリを使用して、棒グラフ、複数系列の比較グラフ、および組み合わせグラフの作成プロセスを最初からデモンストレーションします。

主要内容

Swift Charts は、長年の問題を解決します。Apple プラットフォームでデータ視覚化を行うには、サードパーティのライブラリを使用するか、独自の Core Graphics を描画する必要があります。どちらのオプションも重いです。

新しい Swift Charts フレームワークでは、宣言型のグラフ作成構文が導入されています。データマッピング (「X 軸は日付、Y 軸は売上高」) を記述するだけで、フレームワークが自動的に軸、スケール、凡例、およびインタラクションを処理します。

このセッションでは、Pancake Food Truck アプリケーションを使用した 3 つの典型的なシナリオを示します。このアプリは、クパチーノとサンフランシスコの 2 つの都市におけるさまざまな種類のパンケーキの販売データを記録します。

最初のシーンは、各カテゴリの合計売上ランキングを示す棒グラフです。コードは非常にシンプルです。

Chart(panSales) {
    BarMark(
        x: .value("Pancake", $0.type),
        y: .value("Sales", $0.sales)
    )
}

こちらです.value()このメソッドは重要です。最初のパラメータはラベルの説明、2 番目のパラメータは実際の値です。フレームワークは、生の値を表示するだけでなく、この説明を使用して軸ラベルとアクセス可能な VoiceOver 説明を生成します。

2 番目のシナリオは、複数シリーズの比較です。都市ピッカーがアプリケーションに追加され、SwiftUI Picker を使用してクパチーノとサンフランシスコのデータを切り替えます。行を追加.foregroundStyle(by: .value("City", $0.city))都市のカラーリングで区別できます。

3 番目のシナリオは組み合わせグラフで、同じグラフ内に 2 つの都市のデータを重ね合わせます。 LineMark はポリラインを描画し、PointMark はデータポイントをマークします。.foregroundStyle(by:)自動的に色を割り当て、凡例を生成します。

詳細

BarMark: ヒストグラムの基礎

Swift Charts の核となるアイデアは Mark です。 SwiftUI の各 UI 要素が View に対応するのと同様に、各チャートタイプは Mark に対応します。

BarMarkこれは、ヒストグラムの作成に使用される最も基本的なマークです。初期化には 2 つの次元 x と y が必要です。

Chart(salesData) { sale in
    BarMark(
        x: .value("品种", sale.pancakeType),
        y: .value("销量", sale.count)
    )
}

Chartコンストラクターは、配列内の各要素がチャート上のデータポイントに対応する RandomAccessCollection を受け入れます。データが続く場合Identifiable、コレクションに直接渡すことができます。

ヒストグラムを水平にしたいですか? x と y の値を交換するだけです。

BarMark(
    x: .value("销量", sale.count),
    y: .value("品种", sale.pancakeType)
)

フレームは軸ラベルの方向とレイアウトを自動的に調整するため、手動でフレームを計算したり、ビューを回転したりする必要はありません。

複数のシリーズと動的データ

グラフに複数のデータ系列が含まれる場合、.foregroundStyle(by:)はキー修飾子です:

Chart(salesByCity) { sale in
    BarMark(
        x: .value("日期", sale.date, unit: .day),
        y: .value("销量", sale.count)
    )
    .foregroundStyle(by: .value("城市", sale.city))
}

フレームワークは自動的に各都市に色を割り当て、凡例を生成します。 SwiftUIを使用する場合.animation()データが切り替わるときにチャートをスムーズに遷移させることができます。

Chart(filteredSales) { ... }
    .animation(.easeInOut, value: selectedCity)

このコードの意味は次のとおりです。selectedCity変更によりデータフィルタリングの結果が変わると、チャートは easyInOut 曲線アニメーションで新しい状態に移行します。

LineMark と PointMark の組み合わせ

折れ線グラフの使用法LineMark、そしてBarMark構文はほぼ同じです。

Chart(salesByDate) { sale in
    LineMark(
        x: .value("日期", sale.date),
        y: .value("销量", sale.count)
    )
    .foregroundStyle(by: .value("城市", sale.city))
}

プラスPointMarkマーカーはポリラインの各データポイントに表示できます。

Chart(salesByDate) { sale in
    LineMark(
        x: .value("日期", sale.date),
        y: .value("销量", sale.count)
    )
    .foregroundStyle(by: .value("城市", sale.city))

    PointMark(
        x: .value("日期", sale.date),
        y: .value("销量", sale.count)
    )
    .foregroundStyle(by: .value("城市", sale.city))
}

この組み合わせモデルは Swift チャートの設計の鍵です。さまざまなマークを自由に重ねることができ、フレームワークは座標マッピングを均一に処理します。

他のグラフの種類

セッションは、Swift Charts でサポートされている他のマークタイプを簡単に見て終了します。

// 面积图
AreaMark(
    x: .value("日期", data.date),
    y: .value("值", data.value)
)

// 规则线（阈值线）
RuleMark(
    y: .value("目标", targetValue)
)

// 矩形（热力图）
RectangleMark(
    x: .value("列", data.col),
    y: .value("行", data.row)
)

各マークの API は同じパターンに従います。つまり、x と y の次元は次のようになります。.value()マッピング関係を記述し、データが通過するChartイニシャライザが渡されました。

重要ポイント

マーク組み合わせモードはフレームワークの魂です: チャートは固定テンプレート (棒グラフ/折れ線グラフ/円グラフ) としてではなく、マークの組み合わせとして見なされます。 LineMark + PointMark の組み合わせが一般的ですが、AreaMark + LineMark を重ねることもできます。この設計により、別の DSL を学習することなく、チャートを自然にカスタマイズできるようになります。
.value()値を設定するだけでなく、アクセシビリティと軸ラベルのセマンティクスを提供します。最初の引数は VoiceOver によって読み上げられ、軸ラベルによって参照されます。書く.value("销量", count)単にパス数を増やすのではなく、この習慣を最初から身につけておく価値があります。
ほぼコストゼロのデータ駆動型アニメーション: を使用します。.animation(.easeInOut, value: selectedCity)1 行のコードでチャートデータ間の移行をスムーズに行うことができます。これは、図の世界における SwiftUI の宣言型パラダイムの自然な拡張です。データの変更を宣言すると、フレームワークがアニメーションを処理します。
グラフを転置するためにデータを変更する必要はありません。x/y を入れ替えるだけです: 水平ヒストグラムと垂直ヒストグラムを切り替えるだけです。BarMark(x:y:)2 つのパラメータの順序が問題になります。フレームワークは、軸の方向、ラベルの位置、レイアウトを自動的に処理します。
Identifiableデータモデルによりコードがより簡潔になります: データ構造体を後に続けますIdentifiable，Chart配列を使用して直接初期化することもできます。ForEachidを指定する必要もありません。これは、チャートにおける SwiftUI データフローのベストプラクティスの続きです。