Zenn
Open5

Swift Chartsに入門する

iOS
Swift
kamimikamimi

Swift Charts の実装に関するTips

  • 内部に含むものがForEachしかない場合

❌ForEachを書く

Chart {
    ForEach(sales) { element in
            BarMark(
                x: .value("Sales", element.sales),
                y: .value("Name", element.name)
            )
    }
}

✅Chartの引数にコレクションを渡して初期化すればいい

Chart(sales) { element in
    BarMark(
        x: .value("Sales", element.sales),
        y: .value("Name", element.name)
    )
}
kamimikamimi

Design app experiences with charts

いつ使うか

例えば

  • 過去や予測される値を示す
  • ものやカテゴリを比べる

どうやって使うか

  • グラフには中身を表す言葉が伴うべき

  • 以下のように何かの示唆を示すのは、見慣れていないデータの場合に有効

  • 以下のように他のデータの要約をみせ、タップ時にチャートをフィルターして見せる

  • 小さいチャートは、大きいチャートのプレビューとして使う。
  • 詳細が見れる必要はない
  • 例えば、株価やWatchの表示など

デザインシステム

複数のチャートがある場合

  • 棒グラフや折れ線グラフはよく使われるので、見慣れている

  • 散布図などは見慣れていないので、追加の説明が必要

  • チャートごとに色やスタイルを変えることで、違うチャートだと認識させ、文字を読んでもらえたりする

kamimikamimi

Design an effective chart

重要な５つの要素

  1. Marks
  2. Axes
  3. Description
  4. Interaction
  5. Color

Marks

  • どんな種類のMarkを使うか
    • 早めに実際のデータを使って検証した方が良い
  • ゴールとデータを決める必要がある

Axes

  • X軸とY軸
  • 範囲が静的か動的か
    • 静的：バッテリーのように100%が最大値の場合は、静的
    • 動的：歩数のように最大値がわからないまたはない場合は、動的
  • 目盛線とラベルの密度
    • パターンだけがわかればいい小さいチャートなどは不要

Description

  • グラフの意味を伝えるのに良い

Interactions

  • 全てのインプットで同じ体験を提供するように！

Color

例えば

  • 色でカテゴリを分類する
  • 強度を示す
  • 特定の場所に焦点を当てる

kamimikamimi

Swift Charts: Raise the bar

Swift Charts がサポートするデータタイプ

  • 量的データ
    • 数値
  • 名目データ
    • 個別のカテゴリやグループ
  • 時間的データ
    • ある時点または時間の間隔