体験！Swift Chartsの世界

2025/12/08 に ZOZO.swift #1 で発表した登壇資料です。
https://zozotech-inc.connpass.com/event/374854/

株式会社ZOZO
ブランドソリューション開発本部
FAANS部 フロントエンドブロック
ましょー / 加藤 祥真（@shoma10170806）

#zozoswift

Transcript

1. Copyright © ZOZO, Inc. ମݧʂSwiftChartsͷੈք גࣜձࣾZOZO ϒϥϯυιϦϡʔγϣϯ։ൃຊ෦ FAANS෦ ϑϩϯτΤϯυϒϩοΫ Ճ౻ ঵ਅ @shoma10170806
2. © ZOZO, Inc. 2 FAANSͷ੒Ռը໘ ɾ๮άϥϑ
   ച্දࣔ
   ɾԣεΫϩʔϧ
   ɾදࣔ୯Ґ
   िؒ
3. © ZOZO, Inc. 3 FAANSͷ੒Ռը໘ %($IBSUT άϥϑͷදࣔ 4XJGU$IBSUT ɾ๮άϥϑ
   ച্දࣔ
   ɾԣεΫϩʔϧ
   ɾදࣔ୯Ґ
   िؒ
4. © ZOZO, Inc. 4 ɹɹSwiftChartsͱ͸ʁ  άϥϑ࡞੒ͷͨΊͷϑϨʔϜϫʔΫ
   ɹɾJ04
   Ҏ߱
   ɹɾ4XJGU6*Ͱهड़
   ɹɾ๮άϥϑɺԁάϥϑͳͲଟछྨ
   ɹɾ7PJDF0WFSɺ"VEJP(SBQIͷαϙʔτ
   ɹɾ࣍ݩม׵ Ҿ༻ݩ
   IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPO$IBSUT
5. © ZOZO, Inc. 5 ɹɹFAANSػೳͷ࣮૷ ̎ ɾ๮άϥϑͷදࣔ
   ɾԣεΫϩʔϧରԠ
   ɾिؒ୯ҐͰදࣔ
6. © ZOZO, Inc. 6 ๮άϥϑͷදࣔ import Charts var body: some View { Chart(stackedBarData, id: \.id) { row in BarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) ɹ} }
7. © ZOZO, Inc. 7 ๮άϥϑͷදࣔ import Charts var body: some View { Chart(stackedBarData, id: \.id) { row in BarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) ɹ} } ᶃ
   Πϯϙʔτ
8. © ZOZO, Inc. 8 ๮άϥϑͷදࣔ import Charts var body: some View { Chart(stackedBarData, id: \.id) { row in BarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) ɹ} } ᶃ
   Πϯϙʔτ ᶄ
   $IBSU
   
   σʔλಡΈࠐΈ
9. © ZOZO, Inc. 9 ๮άϥϑͷදࣔ import Charts var body: some View { Chart(stackedBarData, id: \.id) { row in BarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) ɹ} } ᶃ
   Πϯϙʔτ ᶄ
   $IBSU
   
   σʔλಡΈࠐΈ ᶅ
   ๮άϥϑ
10. © ZOZO, Inc. 10 ๮άϥϑͷදࣔ import Charts var body: some View { Chart(stackedBarData, id: \.id) { row in BarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) ɹ} } ᶃ
    Πϯϙʔτ ᶄ
    $IBSU
    
    σʔλಡΈࠐΈ ᶅ
    ๮άϥϑ ᶆ
    ৭෼͚ˍੵΈ্͛
11. © ZOZO, Inc. 11 ԣεΫϩʔϧˍ1िؒදࣔ Chart(stackedBarData, id: \.id) { row in ɹBarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) } .chartScrollableAxes(.horizontal) .chartXVisibleDomain(length: 7 * 24 * 60 * 60) .chartScrollTargetBehavior(.paging) ᶃ ԣεΫϩʔϧ
    J04
    Ҏ߱
12. © ZOZO, Inc. 12 ԣεΫϩʔϧˍ1िؒදࣔ Chart(stackedBarData, id: \.id) { row in ɹBarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) } .chartScrollableAxes(.horizontal) .chartXVisibleDomain(length: 7 * 24 * 60 * 60) .chartScrollTargetBehavior(.paging) ᶃ ԣεΫϩʔϧ
    J04
    Ҏ߱ ᶄ
    ೔෼ͷදࣔ
13. © ZOZO, Inc. 13 ԣεΫϩʔϧˍ1िؒදࣔ Chart(stackedBarData, id: \.id) { row in ɹBarMark( x: .value("Day", row.date, unit: .day), y: .value("Sales", row.sales) ) .foregroundStyle(by: .value("Type", row.type)) } .chartScrollableAxes(.horizontal) .chartXVisibleDomain(length: 7 * 24 * 60 * 60) .chartScrollTargetBehavior(.paging) ᶃ ԣεΫϩʔϧ
    J04
    Ҏ߱ ᶄ
    ೔෼ͷදࣔ ᶅ
    िؒ୯ҐͰεΫϩʔϧ
    ɹʢJ04
    Ҏ߱ʣ
14. © ZOZO, Inc. 14 ɹɹએ఻  ɾ'""/4ը໘ͷ࣮૷ํ๏
    ɾ՝୊ͷղܾํ๏
    ɾ%($IBSUTͱ4XJGU
    $IBSUTͷൺֱ