colin's 블로그

[swift] - Swift Charts로 에너지 생산량 표시하기

16 Nov 2023

swift

이번에는 Swift Charts를 사용하여 에너지 생산량을 그래프로 표시하는 방법에 대해 알아보겠습니다. Swift Charts는 iOS 애플리케이션에서 간단하게 그래프를 그릴 수 있는 오픈 소스 라이브러리입니다.

1. Swift Charts 설치하기

먼저, Swift Charts를 설치해야 합니다. Swift Charts는 Swift Package Manager를 통해 간편하게 설치할 수 있습니다. 프로젝트 폴더에서 Package.swift 파일을 열고 다음 코드를 추가합니다:

import PackageDescription

let package = Package(
    name: "YourProjectName",
    dependencies: [
        .package(url: "https://github.com/i-schuetz/SwiftCharts.git", from: "0.7.0")
    ],
    targets: [
        .target(name: "YourProjectName", dependencies: ["SwiftCharts"])
    ]
)

그리고 터미널에서 다음 명령어를 실행하여 종속성을 업데이트합니다:

swift package update
swift build
swift package generate-xcodeproj

이제 Swift Charts가 프로젝트에 추가되었습니다.

2. 그래프 데이터 준비하기

에너지 생산량 데이터를 그래프로 표시하기 위해서는 먼저 해당 데이터를 준비해야 합니다. 예를 들어, 다음과 같은 데이터를 사용해보겠습니다:

let energyProductionData: [(year: Int, value: Double)] = [
    (2015, 1200),
    (2016, 1300),
    (2017, 1500),
    (2018, 1400),
    (2019, 1600),
    (2020, 1800)
]

위와 같이 year와 value를 튜플로 가지는 데이터 배열을 만들어 줍니다.

3. 그래프 생성하기

이제 그래프를 생성하는 코드를 작성해보겠습니다. 먼저, 그래프 뷰 컨트롤러를 생성하고 해당 뷰를 화면에 추가합니다:

import UIKit
import SwiftCharts

class EnergyProductionChartViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let chartView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
        view.addSubview(chartView)
        
        let chart = createEnergyProductionChart()
        chart.frame = CGRect(x: 0, y: 0, width: chartView.frame.width, height: chartView.frame.height)
        chartView.addSubview(chart)
    }
    
    func createEnergyProductionChart() -> Chart {
        let chartConfig = BarChartConfig(
            valsAxisConfig: ChartAxisConfig(from: 0, to: 2000, by: 500),
            xAxisConfig: ChartAxisConfig(from: 2015, to: 2020, by: 1),
            yAxisConfig: ChartAxisConfig(from: 0, to: 2000, by: 500)
        )
        
        let seriesPoints = energyProductionData.enumerated().map { index, data in
            return ChartPoint(x: ChartAxisValueDouble(data.year), y: ChartAxisValueDouble(data.value))
        }
        
        let series = ChartSeries(data: seriesPoints)
        
        return Chart(
            frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height),
            settings: chartConfig,
            series: [series]
        )
    }
}

위의 코드에서 createEnergyProductionChart 메서드에서 그래프의 설정과 데이터를 가지고 그래프를 생성합니다. BarChartConfig는 그래프의 축 설정을 담고 있는 구조체입니다. seriesPoints는 데이터 배열에서 차트의 포인트를 생성합니다. 마지막으로 Chart 클래스의 인스턴스를 생성하여 그래프를 반환합니다.

4. 그래프 표시하기

앱의 메인 뷰 컨트롤러에서 EnergyProductionChartViewController를 추가하고, 해당 뷰 컨트롤러를 표시하면 그래프가 화면에 표시됩니다:

import UIKit

class MainViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let energyProductionChartViewController = EnergyProductionChartViewController()
        addChild(energyProductionChartViewController)
        view.addSubview(energyProductionChartViewController.view)
        energyProductionChartViewController.didMove(toParent: self)
    }

}

이제 앱을 실행하면 Swift Charts로 작성한 그래프가 화면에 표시됩니다.

결론

Swift Charts를 사용하여 에너지 생산량을 그래프로 표시하는 방법에 대해 알아보았습니다. 이러한 그래프를 사용하면 앱에서 다양한 데이터를 시각적으로 표현할 수 있습니다. Swift Charts는 쉽게 사용할 수 있는 강력한 라이브러리이므로, 다양한 그래프를 작성하여 앱의 사용자 경험을 향상시킬 수 있습니다.

참고 자료

Swift Charts GitHub Repository