Swift Charts

dpearson2699/swift-ios-skills/skills/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 应用中使用 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周前更新