Swift Charts iOS 26: opas datavisualisointiin SwiftUI:lla (2026)

Päivitetty: 10. syyskuuta 2026

Swift Charts on Applen deklaratiivinen datavisualisointikehys, jolla rakennat natiivit, saavutettavat ja animoidut kaaviot SwiftUI:ssa muutamalla rivillä koodia. Se lanseerattiin iOS 16:ssa, ja iOS 26 tuo mukanaan isoja laajennuksia: kolmiulotteisia Chart3D-näkymiä, laajennetut valintarajapinnat, uusia merkintätyyppejä sekä paremman suorituskyvyn suurilla datajoukoilla. Käyn tässä oppaassa Swift Chartsin läpi perusteista edistyneisiin optimointeihin asti, ja jokaisesta osiosta löydät ajettavat koodiesimerkit.

Mikä on Swift Charts ja miksi se on tärkeä?

Swift Charts on Applen WWDC 2022:ssa julkaisema kehys, joka mahdollistaa datavisualisointien rakentamisen samalla deklaratiivisella syntaksilla kuin SwiftUI-käyttöliittymät. Sen sijaan, että toisit kolmannen osapuolen kirjaston tai piirtäisit itse Canvas-näkymään, määrittelet mitä haluat nähdä (palkin, viivan, alueen), ja kehys hoitaa asettelun, akselit, väriskaalat ja animaatiot puolestasi.

Kolme vuotta lanseerauksen jälkeen Swift Charts on kypsynyt tuotantovalmiiksi työkaluksi. iOS 26:n mukana tulevat päivitykset (erityisesti Chart3D ja laajennetut valinta-API:t) tekevät siitä varteenotettavan vaihtoehdon myös vaativiin analytiikkanäkymiin, joihin aiemmin tartuttiin Metaliin tai kolmannen osapuolen ratkaisuihin. Kehys tukee kaikkia Applen alustoja: iOS, iPadOS, macOS, watchOS, tvOS ja visionOS, mikä tekee koodinjaosta suoraviivaista.

Verrattuna vaihtoehtoihin, kuten Charts (nyt DGCharts), DGCharts-kirjastoon tai Core Plotiin, Swift Charts tarjoaa: (1) integraation SwiftUI:n tilanhallintaan, (2) automaattiset dynaamiset akselit, (3) sisäänrakennetun tumman tilan tuen, (4) saavutettavuuden ilman lisätyötä ja (5) Xcode Previews -yhteensopivuuden. Ainoat todelliset varjopuolet ovat käyttöjärjestelmäversiovaatimus (iOS 16+) ja Chart3D-rajoittuminen iOS 26:een.

Ensimmäinen Swift Charts -kaavio SwiftUI:ssa

Aloitetaan yksinkertaisimmasta mahdollisesta esimerkistä: kuukausittaisen liikevaihdon palkkikaaviosta. Tarvitset vain import Charts-lauseen ja datamallin, jolla on tunnistettava avain (Identifiable tai eksplisiittinen id-parametri).

import SwiftUI
import Charts

struct MonthlyRevenue: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Double
}

struct RevenueChartView: View {
    let data: [MonthlyRevenue] = [
        .init(month: "Tammi", revenue: 12_450),
        .init(month: "Helmi", revenue: 15_820),
        .init(month: "Maalis", revenue: 18_240),
        .init(month: "Huhti", revenue: 14_910),
        .init(month: "Touko", revenue: 21_300),
        .init(month: "Kesä", revenue: 25_760)
    ]

    var body: some View {
        Chart(data) { item in
            BarMark(
                x: .value("Kuukausi", item.month),
                y: .value("Liikevaihto", item.revenue)
            )
            .foregroundStyle(.blue.gradient)
        }
        .frame(height: 260)
        .padding()
    }
}

Muutama huomionarvoinen yksityiskohta. Chart-alustin ottaa datakokoelman ja sulkeuman, joka palauttaa merkintöjä (marks) jokaista alkiota kohden. PlottableValue-arvot (kuten .value("Kuukausi", item.month)) sisältävät sekä otsikon että arvon, ja otsikkoa käytetään sekä akselimerkintöihin että VoiceOveriin. .foregroundStyle(.blue.gradient) antaa palkeille pehmeän gradientin ilman lisäkoodia.

Merkintätyypit: BarMark, LineMark ja koko perhe

Swift Charts tarjoaa kahdeksan sisäänrakennettua merkintätyyppiä, ja iOS 26 lisää joukkoon SectorMark-parannuksia sekä uuden FunctionMark-tyypin matemaattisten funktioiden piirtämiseen. Merkintöjä voi yhdistellä samassa kaaviossa, mikä on ratkaiseva ero moniin muihin kehyksiin verrattuna.

Perusmerkinnät

• BarMark: pystyt tai vaakapalkit; sopii kategoriseen dataan.
• LineMark: viivat aikasarjoille; tukee interpolationMethod-modifieria (linear, cardinal, catmullRom, monotone, stepStart, stepEnd, stepCenter).
• PointMark: sirontakaaviot; yhdistä usein LineMarkiin.
• AreaMark: täytetyt alueet viivan alle; hyvä kumulatiivisiin arvoihin.
• RuleMark: vaaka- tai pystyviivat kynnysten näyttämiseen (esim. keskiarvo, tavoite).
• RectangleMark: mielivaltaisesti sijoitetut suorakulmiot; hyödyllinen lämpökarttoihin.
• SectorMark: piirakka- ja donitsikaaviot (iOS 17+).
• FunctionMark: matemaattiset funktiot ilman datapisteitä (iOS 26+).

Yhdistelmäkaavio: viiva ja alue

Chart(temperatureData) { day in
    AreaMark(
        x: .value("Päivä", day.date),
        yStart: .value("Min", day.min),
        yEnd: .value("Max", day.max)
    )
    .foregroundStyle(.orange.opacity(0.25))

    LineMark(
        x: .value("Päivä", day.date),
        y: .value("Keskiarvo", day.average)
    )
    .foregroundStyle(.orange)
    .interpolationMethod(.catmullRom)
    .symbol(Circle())

    RuleMark(y: .value("Tavoite", 22))
        .foregroundStyle(.red)
        .lineStyle(StrokeStyle(lineWidth: 1, dash: [4, 4]))
        .annotation(position: .top, alignment: .leading) {
            Text("Tavoite 22 °C")
                .font(.caption2)
                .foregroundStyle(.red)
        }
}
.chartYAxisLabel("°C")

Yllä AreaMark piirtää min–max-vaihteluvälin, LineMark keskiarvon Catmull–Rom-interpoloinnilla, ja RuleMark merkitsee tavoitteen katkoviivalla annotaation kanssa. Kaikki tapahtuu yhdessä Chart-lohkossa, koska merkinnät jakavat automaattisesti akseliskaalan.

Milloin valita mikäkin merkintä

Kokemuksestani sanoisin näin. Käytä BarMarkia, kun vertailet erillisiä kategorioita, LineMarkia trendien näyttämiseen ajan yli, ja PointMarkia, kun tutkit kahden muuttujan välistä korrelaatiota. AreaMark on erinomainen kumulatiivisiin osuuksiin, kun taas RuleMark pelaa hyvin kynnysten ja keskiarvojen korostamisessa ilman että joudut piirtämään erillistä viivaa. RectangleMarkia käytän itse eniten Gantt-tyylisiin aikajanoihin ja lämpökarttoihin, joissa värivoimakkuus koodaa arvoa. Jokainen merkintätyyppi tukee samoja foregroundStyle-, opacity- ja annotation-modifiereita, joten yhdistäminen on suoraviivaista.

Interaktiiviset kaaviot ja valinnat iOS 26:ssa

iOS 17 toi ensimmäisen chartXSelection-modifierin, joka mahdollisti pisteen valinnan pyyhkäisyllä. iOS 26 laajentaa tätä isosti: nyt voit sitoa valintoja kahteen ulottuvuuteen (chartXSelection ja chartYSelection), valita alueita (chartXSelectionRange) ja käyttää uutta chartGesture-API:a mukautettuihin eleisiin.

struct InteractiveRevenueChart: View {
    @State private var selectedMonth: String?
    let data: [MonthlyRevenue]

    var selectedRevenue: MonthlyRevenue? {
        guard let selectedMonth else { return nil }
        return data.first { $0.month == selectedMonth }
    }

    var body: some View {
        Chart(data) { item in
            BarMark(
                x: .value("Kuukausi", item.month),
                y: .value("Liikevaihto", item.revenue)
            )
            .foregroundStyle(item.month == selectedMonth ? .blue : .blue.opacity(0.35))

            if let selected = selectedRevenue, selected.id == item.id {
                RuleMark(x: .value("Kuukausi", selected.month))
                    .foregroundStyle(.gray.opacity(0.4))
                    .annotation(position: .top, spacing: 4) {
                        VStack(alignment: .leading, spacing: 2) {
                            Text(selected.month).font(.caption2).bold()
                            Text(selected.revenue.formatted(.currency(code: "EUR")))
                                .font(.caption).monospacedDigit()
                        }
                        .padding(6)
                        .background(.thinMaterial, in: .rect(cornerRadius: 6))
                    }
            }
        }
        .chartXSelection(value: $selectedMonth)
        .frame(height: 260)
    }
}

Törmäsin itse tähän täsmälleen samaan patternia viime projektissa, kun rakensin talouskoontinäkymää: chartXSelection(value:) sitoo pyyhkäisyeleen tilaan, ja voit lukea valitun arvon suoraan. Huomaa .annotation(position: .top, spacing:)-modifieri, joka näyttää työkaluvihjeen valitun palkin yläpuolella. Kaikki asettuu automaattisesti kaavion sisällä.

Kaavion tyylitys, akselit ja skaalat

Oletusarvoisesti Swift Charts tuottaa siistin, mutta geneerisen ulkoasun. Todellisissa sovelluksissa haluat yleensä hallita akselien näkyvyyttä, merkintätiheyttä, väriskaaloja ja legendaa. Alla kolme yleisintä mukautusta.

Akselien mukauttaminen

.chartXAxis {
    AxisMarks(values: .stride(by: .month)) { value in
        AxisGridLine()
        AxisTick()
        AxisValueLabel(format: .dateTime.month(.abbreviated))
    }
}
.chartYAxis {
    AxisMarks(position: .leading) { value in
        AxisGridLine().foregroundStyle(.gray.opacity(0.15))
        AxisValueLabel {
            if let doubleValue = value.as(Double.self) {
                Text(doubleValue.formatted(.currency(code: "EUR").notation(.compactName)))
            }
        }
    }
}

Väriskaalat useille sarjoille

Chart(salesByProduct) { entry in
    LineMark(
        x: .value("Kk", entry.month),
        y: .value("Myynti", entry.sales)
    )
    .foregroundStyle(by: .value("Tuote", entry.product))
    .symbol(by: .value("Tuote", entry.product))
}
.chartForegroundStyleScale([
    "iPhone": .blue,
    "iPad": .purple,
    "Mac": .green
])

Kun käytät .foregroundStyle(by:)-modifieria, Swift Charts luo automaattisesti legendan ja pitää värien ja tuotteiden yhdistelmän johdonmukaisena kaikissa uudelleenrenderöinneissä. chartForegroundStyleScale antaa sinun määrittää eksplisiittiset värit brändille sopiviksi.

Chart3D ja kolmiulotteiset visualisoinnit iOS 26:ssa

iOS 26:n merkittävin uudistus on Chart3D-tyyppi, joka mahdollistaa aidosti kolmiulotteisten kaavioiden rakentamisen samalla deklaratiivisella syntaksilla. Käyttötapauksia ovat esimerkiksi tieteelliset visualisoinnit, maantieteellinen data ja koneoppimismallien piirtäminen. Chart3D tukee kääntämistä, zoomausta ja Apple Vision Pro -integraatiota.

import Charts

struct ScatterPlot3D: View {
    let points: [DataPoint]
    @State private var pose = Chart3DPose(
        azimuth: .degrees(30),
        inclination: .degrees(45)
    )

    var body: some View {
        Chart3D(points) { point in
            PointMark(
                x: .value("X", point.x),
                y: .value("Y", point.y),
                z: .value("Z", point.z)
            )
            .foregroundStyle(by: .value("Klusteri", point.cluster))
            .symbolSize(by: .value("Paino", point.weight))
        }
        .chart3DPose($pose)
        .chart3DCameraProjection(.perspective)
        .frame(height: 400)
    }
}

Chart3DPose sitoo katselukulman tilaan, joten käyttäjä voi kääntää kuvaa sormella ja koodi voi asettaa oletusnäkymän. chart3DCameraProjection valitsee joko perspektiivi- tai ortografisen projektion. Chart3D toimii myös Apple Vision Prossa täysin volymetrisenä näkymänä, kun asetat sen sisään WindowGroupiin, jonka tyylinä on .volumetric.

Suorituskyky suurten datajoukkojen kanssa

Swift Charts renderöi jokaisen merkinnän erikseen SwiftUI-näkyminä. Se on kätevää, mutta muuttuu pullonkaulaksi noin 5 000–10 000 datapisteen jälkeen. Kolme tehokkainta strategiaa suurten datajoukkojen käsittelyyn ovat downsamplaus, chartDataStride-modifieri ja lazy-piirto Chart-alustimen id-parametrilla.

Downsamplaus keskiarvojen kautta

func downsample(_ data: [Reading], to buckets: Int) -> [Reading] {
    guard data.count > buckets else { return data }
    let bucketSize = data.count / buckets
    return stride(from: 0, to: data.count, by: bucketSize).map { start in
        let end = min(start + bucketSize, data.count)
        let slice = data[start..

Chart(data) { item in
    BarMark(
        x: .value("Kuukausi", item.month),
        y: .value("Liikevaihto", item.revenue)
    )
    .accessibilityLabel(item.month)
    .accessibilityValue("\(Int(item.revenue)) euroa")
}
.accessibilityChartDescriptor(RevenueDescriptor(data: data))