Swift Charts

作者 dpearson26998d90fd121a26無授權條款1.1K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫2 個月前更新

Implement, review, or improve data visualizations using Swift Charts. Use when building bar, line, area, point, pie, donut, or iOS 26 3D charts; when adding chart selection, scrolling, annotations, axes, scales, legends, or foregroundStyle grouping; when plotting functions with BarPlot, LinePlot, AreaPlot, PointPlot, Chart3D, or SurfacePlot; or when creating heat maps, Gantt charts, grouped bars, sparklines, threshold lines, or spatial visualizations.

僅含說明Software DevelopmentData & Analytics
AI 產生的概覽

指導實作、審查與改進適用於 iOS 26+ 的 Swift Charts 資料視覺化。

功能
此技能提供使用 Apple Swift Charts 框架建立資料視覺化的參考說明與程式碼範例。內容涵蓋圖表容器、長條圖、折線圖、面積圖、點圖、扇形圖等標記類型以及 3D 曲面圖，還包括座標軸、比例尺、樣式、選取、捲動、標註、圖例與向量化繪圖。它也列出常見錯誤以及針對現有圖表程式碼的審查清單。產出是指引與程式碼範例，而不是產生的檔案。
適用情境
適用於撰寫或審查 iOS 的 Swift Charts 程式碼，包括長條圖、折線圖、面積圖、點圖、圓餅圖、環形圖或 iOS 26 的 3D 圖表。也適合圖表選取、捲動、標註、座標軸、比例尺、圖例、熱圖、甘特圖、分組長條圖、迷你圖、閾值線或空間視覺化的相關工作。
執行需求
需要代理程式能夠讀取隨附的參考檔案 references/charts-patterns.md。此技能不含指令碼，也不需要認證資訊；所引用的 Apple 文件連結意味著可選的網路存取。

Swift Charts

Build data visualizations with Swift Charts targeting iOS 26+. Compose marks inside Chart or Chart3D, configure axes and scales with view modifiers, and use vectorized plots or 3D plots when the data calls for them.

See references/charts-patterns.md [blocked] for extended patterns, 3D charts, accessibility, and theming guidance.

Contents

Workflow

1. Build a new chart

  1. Define data as an Identifiable struct or use id: key path.
  2. Choose mark type(s): BarMark, LineMark, PointMark, AreaMark, RuleMark, RectangleMark, SectorMark, or SurfacePlot.
  3. Wrap 2D marks in Chart; use Chart3D only for real spatial or surface data.
  4. Encode visual channels: .foregroundStyle(by:), .symbol(by:), .lineStyle(by:).
  5. Configure axes with .chartXAxis / .chartYAxis.
  6. Set scale domains with .chartXScale(domain:) / .chartYScale(domain:).
  7. Add selection, scrolling, or annotations as needed.
  8. For 1000+ 2D data points, use vectorized plots (BarPlot, LinePlot, etc.).
  9. Render representative empty, typical, dense, large-text, high-contrast, and VoiceOver states; exercise selection and scrolling when present.
  10. If an encoding, axis, selection, or accessibility check fails, restore the data fixture, fix one layer, and rerun the same matrix before adding decoration.

2. Review existing chart code

Identify the data semantics before judging mark choice. Then trace every value through mark, scale, axis, style, selection, and accessibility output; run the same validation matrix used for new charts.

Chart Container

swift
Chart(sales) { item in    BarMark(x: .value("Month", item.month), y: .value("Revenue", item.revenue))}

Use the data-driven initializer for a single collection. Use the content closure for mixed marks or multiple series, and pass id: when elements are not Identifiable. Load references/charts-patterns.md [blocked] for complete mixed-series, theming, accessibility, and 3D recipes.

Mark Types

BarMark (iOS 16+)

swift
// Vertical barBarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))
// Stacked by category (automatic when same x maps to multiple bars)BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))    .foregroundStyle(by: .value("Product", item.product))
// Horizontal barBarMark(x: .value("Sales", item.sales), y: .value("Month", item.month))
// Interval bar (Gantt chart)BarMark(    xStart: .value("Start", item.start),    xEnd: .value("End", item.end),    y: .value("Task", item.task))

LineMark (iOS 16+)

swift
// Single lineLineMark(x: .value("Date", item.date), y: .value("Price", item.price))
// Multi-series via foregroundStyle encodingLineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))    .foregroundStyle(by: .value("City", item.city))    .interpolationMethod(.catmullRom)
// Multi-series with explicit series parameterLineMark(    x: .value("Date", item.date),    y: .value("Price", item.price),    series: .value("Ticker", item.ticker))

PointMark (iOS 16+)

swift
PointMark(x: .value("Height", item.height), y: .value("Weight", item.weight))    .foregroundStyle(by: .value("Species", item.species))    .symbol(by: .value("Species", item.species))    .symbolSize(100)

AreaMark (iOS 16+)

swift
// Stacked areaAreaMark(x: .value("Date", item.date), y: .value("Sales", item.sales))    .foregroundStyle(by: .value("Category", item.category))
// Range bandAreaMark(    x: .value("Date", item.date),    yStart: .value("Min", item.min),    yEnd: .value("Max", item.max)).opacity(0.3)

RuleMark (iOS 16+)

swift
RuleMark(y: .value("Target", 9000))    .foregroundStyle(.red)    .lineStyle(StrokeStyle(dash: [5, 3]))    .annotation(position: .top, alignment: .leading) {        Text("Target").font(.caption).foregroundStyle(.red)    }

RectangleMark (iOS 16+)

swift
RectangleMark(x: .value("Hour", item.hour), y: .value("Day", item.day))    .foregroundStyle(by: .value("Intensity", item.intensity))

SectorMark (iOS 17+)

Use SectorMark for strictly positive values; filter, aggregate, or explain zero/negative values outside the pie or donut.

swift
// Pie chartChart(data, id: \.name) { item in    SectorMark(angle: .value("Sales", item.sales))        .foregroundStyle(by: .value("Category", item.name))}
// Donut chartChart(data, id: \.name) { item in    SectorMark(        angle: .value("Sales", item.sales),        innerRadius: .ratio(0.618),        outerRadius: .inset(10),        angularInset: 1    )    .cornerRadius(4)    .foregroundStyle(by: .value("Category", item.name))}

Axis Customization

swift
// Hide axes.chartXAxis(.hidden).chartYAxis(.hidden)
// Custom axis content.chartXAxis {    AxisMarks(values: .stride(by: .month)) { value in        AxisGridLine()        AxisTick()        AxisValueLabel(format: .dateTime.month(.abbreviated))    }}
// Multiple AxisMarks compositions (different intervals for grid vs. labels).chartXAxis {    AxisMarks(values: .stride(by: .day)) { _ in AxisGridLine() }    AxisMarks(values: .stride(by: .week)) { _ in        AxisTick()        AxisValueLabel(format: .dateTime.week())    }}
// Axis labels (titles).chartXAxisLabel("Time", position: .bottom, alignment: .center).chartYAxisLabel("Revenue ($)", position: .leading, alignment: .center)

Scale Configuration

swift
.chartYScale(domain: 0...100)                          // Explicit numeric domain.chartYScale(domain: .automatic(includesZero: true))   // Include zero.chartYScale(domain: 1...10000, type: .log)            // Logarithmic scale.chartXScale(domain: ["Mon", "Tue", "Wed", "Thu"])     // Categorical ordering

Foreground Style and Encoding

swift
BarMark(...).foregroundStyle(.blue)                                    // Static colorBarMark(...).foregroundStyle(by: .value("Category", item.category))   // Data encodingAreaMark(...).foregroundStyle(                                         // Gradient    .linearGradient(colors: [.blue, .cyan], startPoint: .bottom, endPoint: .top))

Selection (iOS 17+)

swift
@State private var selectedDate: Date?@State private var selectedRange: ClosedRange<Date>?@State private var selectedAngle: Double?
// Point selectionChart(data) { item in    LineMark(x: .value("Date", item.date), y: .value("Value", item.value))}.chartXSelection(value: $selectedDate)
// Range selection.chartXSelection(range: $selectedRange)
// Angular selection binds the plottable angle value; derive the category from ranges..chartAngleSelection(value: $selectedAngle)

Scrollable Charts (iOS 17+)

swift
Chart(dailyData) { item in    BarMark(x: .value("Date", item.date, unit: .day), y: .value("Steps", item.steps))}.chartScrollableAxes(.horizontal).chartXVisibleDomain(length: 3600 * 24 * 7) // 7 days visible.chartScrollPosition(initialX: latestDate).chartScrollTargetBehavior(    .valueAligned(matching: DateComponents(hour: 0), majorAlignment: .page))

Annotations

swift
BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))    .annotation(position: .top, alignment: .center, spacing: 4) {        Text("\(item.sales, format: .number)").font(.caption2)    }
// Overflow resolution.annotation(    position: .top,    overflowResolution: .init(x: .fit(to: .chart), y: .padScale)) { Text("Label") }

Legend

swift
.chartLegend(.hidden)                                           // Hide.chartLegend(position: .bottom, alignment: .center, spacing: 10) // Position.chartLegend(position: .bottom) {                                // Custom    HStack {        ForEach(categories, id: \.self) { cat in            Label(cat, systemImage: "circle.fill").font(.caption)        }    }}

Vectorized Plots (iOS 18+)

Use for large datasets (1000+ points). Accept entire collections or functions.

swift
// Data-drivenChart {    BarPlot(sales, x: .value("Month", \.month), y: .value("Revenue", \.revenue))        .foregroundStyle(\.barColor)}
// Function plotting: y = f(x)Chart {    LinePlot(x: "x", y: "y", domain: -5...5) { x in sin(x) }}
// Parametric: (x, y) = f(t)Chart {    LinePlot(x: "x", y: "y", t: "t", domain: 0...(2 * .pi)) { t in        (x: cos(t), y: sin(t))    }}

Apply KeyPath-based modifiers before simple-value modifiers:

swift
BarPlot(data, x: .value("X", \.x), y: .value("Y", \.y))    .foregroundStyle(\.color)    // KeyPath first    .opacity(0.8)                // Value modifier second

3D Charts (iOS 26+)

Use Chart3D for spatial data or bivariate surfaces, not as a decorative replacement for ordinary 2D categorical or time-series charts. Chart3D accepts SurfacePlot plus 3D initializers of PointMark, RuleMark, and RectangleMark.

swift
@State private var pose: Chart3DPose = .default
Chart3D {    SurfacePlot(x: "x", y: "y", z: "z") { x, z in        sin(2 * x) * cos(2 * z)    }    .foregroundStyle(.heightBased)}.chartXScale(domain: -2...2).chartYScale(domain: -1...1).chartZScale(domain: -2...2).chart3DPose($pose)

Common Mistakes

1. Missing series parameter for multi-line charts

swift
// WRONG -- all points connect into one lineChart {    ForEach(allCities) { item in        LineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))    }}
// CORRECT -- separate lines per cityChart {    ForEach(allCities) { item in        LineMark(x: .value("Date", item.date), y: .value("Temp", item.temp))            .foregroundStyle(by: .value("City", item.city))    }}

2. Too many SectorMark slices

swift
// WRONG -- 20 tiny sectors are unreadableChart(twentyCategories, id: \.name) { item in    SectorMark(angle: .value("Value", item.value))}
// CORRECT -- group into top 5 + "Other"Chart(groupedData, id: \.name) { item in    SectorMark(angle: .value("Value", item.value))        .foregroundStyle(by: .value("Category", item.name))}

3. Missing scale domain when zero-baseline matters

swift
// WRONG -- axis starts at ~95; small changes look dramaticChart(data) {    LineMark(x: .value("Day", $0.day), y: .value("Score", $0.score))}
// CORRECT -- explicit domain for honest representationChart(data) {    LineMark(x: .value("Day", $0.day), y: .value("Score", $0.score))}.chartYScale(domain: 0...100)

4. Static foregroundStyle overriding data encoding

swift
// WRONG -- static color overrides by-value encodingBarMark(x: .value("X", item.x), y: .value("Y", item.y))    .foregroundStyle(by: .value("Category", item.category))    .foregroundStyle(.blue)
// CORRECT -- use only the data encodingBarMark(x: .value("X", item.x), y: .value("Y", item.y))    .foregroundStyle(by: .value("Category", item.category))

5. Individual marks for 10,000+ data points

swift
// WRONG -- creates 10,000 mark views; slowChart(largeDataset) { item in    PointMark(x: .value("X", item.x), y: .value("Y", item.y))}
// CORRECT -- vectorized plot (iOS 18+)Chart {    PointPlot(largeDataset, x: .value("X", \.x), y: .value("Y", \.y))}

6. Fixed chart height breaking Dynamic Type

swift
// WRONG -- clips axis labels at large text sizesChart(data) { ... }    .frame(height: 200)
// CORRECT -- adaptive sizingChart(data) { ... }    .frame(minHeight: 200, maxHeight: 400)

7. KeyPath modifier after value modifier on vectorized plots

swift
// WRONG -- compiler errorBarPlot(data, x: .value("X", \.x), y: .value("Y", \.y))    .opacity(0.8)    .foregroundStyle(\.color)
// CORRECT -- KeyPath modifiers firstBarPlot(data, x: .value("X", \.x), y: .value("Y", \.y))    .foregroundStyle(\.color)    .opacity(0.8)

8. Missing accessibility labels

swift
// WRONG -- VoiceOver users get no contextChart(data) {    BarMark(x: .value("Month", $0.month), y: .value("Sales", $0.sales))}
// CORRECT -- add per-mark accessibilityChart(data) { item in    BarMark(x: .value("Month", item.month), y: .value("Sales", item.sales))        .accessibilityLabel("\(item.month)")        .accessibilityValue("\(item.sales) units sold")}

9. Treating angle selection as category selection

chartAngleSelection(value:) binds the selected plottable angle value. For pie and donut charts, map that numeric value through cumulative sector ranges before comparing it to a category label.

Review Checklist

  • Data model uses Identifiable or chart uses id: key path
  • Mark type matches goal (bar=comparison, line=trend, sector=proportion)
  • Multi-series lines use series: parameter or .foregroundStyle(by:)
  • Axes configured with appropriate labels, ticks, and grid lines
  • Scale domain set explicitly when zero-baseline matters
  • Pie/donut uses positive values, 5-7 sectors, and "Other" grouping
  • Selection binding type matches axis data type (Date? for date axis)
  • Pie/donut angle selection maps numeric angle values back to categories
  • Scrollable charts set .chartXVisibleDomain(length:) for viewport
  • Vectorized plots used for datasets exceeding 1000 points
  • KeyPath modifiers applied before value modifiers on vectorized plots
  • Chart3D used only for real 3D data or surfaces, with z scale and pose reviewed
  • Accessibility labels added to marks for VoiceOver
  • Chart tested with Dynamic Type and Dark Mode
  • Legend visible and positioned, or intentionally hidden
  • Ensure chart data model types are Sendable; update chart data on @MainActor

References

來源與署名

來源：dpearson2699/swift-ios-skills位於skills/swift-charts提交8d90fd1

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 dpearson2699/swift-ios-skills 的技能

Widgetkit

dpearson2699

指導實作、審查與改進 iOS、iPadOS、watchOS 與 CarPlay 上的 WidgetKit 小工具與控制項。

Software Development1.1K2 個月前更新

Weatherkit

dpearson2699

指導 iOS 開發者使用 WeatherService 取得 WeatherKit 預報、警報與署名資訊。

Software Development1.1K2 個月前更新

Vision Framework

dpearson2699

Implement computer vision features including text recognition (OCR), face detection, barcode scanning, image segmentation, object tracking, and document scanning in iOS apps. Covers both the modern Swift-native Vision API (iOS 18+) and legacy VNRequest patterns, VisionKit DataScannerViewController for live camera scanning, and CoreMLRequest/VNCoreMLRequest for custom model inference. Use when adding OCR, barcode scanning, face detection, or custom Core ML model inference with Vision.

待分類1.1K2 個月前更新

Tipkit

dpearson2699

Implement and review Apple TipKit feature-discovery UI for iOS 17+ apps. Use when adding or auditing in-app tips, contextual help, coach marks, Tip, TipView, popoverTip, rules, events, actions, display frequency, testing overrides, reusable tip identifiers, or iOS 18+ TipGroup and CloudKit tip sync; avoid for generic SwiftUI navigation or layout outside tip presentation.

待分類1.1K2 個月前更新

Tabletopkit

dpearson2699

指導使用 TabletopKit 在 visionOS 上打造多人空間桌遊，涵蓋棋具、座位、動作與 RealityKit 算繪。

Software Development1.1K2 個月前更新

Swiftui Webkit

dpearson2699

指導在 iOS 26 及更新版本的 SwiftUI App 中使用 WebKit for SwiftUI 嵌入與控制網頁內容。

Software Development1.1K2 個月前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新