SwiftUI Charts로 방사형 차트만들기

개요

Radar 차트를  Charts 프레임워크를 이용해서 만들어 보려한다.

 

Charts에서는 차트의 데이터를 위처럼 묶는다.

 

본론

// 1
let greenDataSet = RadarChartDataSet(
    entries: [
        RadarChartDataEntry(value: 210),
        RadarChartDataEntry(value: 60.0),
        RadarChartDataEntry(value: 150.0),
        RadarChartDataEntry(value: 150.0),
        RadarChartDataEntry(value: 160.0),
        RadarChartDataEntry(value: 150.0),
        RadarChartDataEntry(value: 110.0),
        RadarChartDataEntry(value: 190.0),
        RadarChartDataEntry(value: 200.0)
    ]
)
let redDataSet = RadarChartDataSet(
    entries: [
        RadarChartDataEntry(value: 120.0),
        RadarChartDataEntry(value: 160.0),
        RadarChartDataEntry(value: 110.0),
        RadarChartDataEntry(value: 110.0),
        RadarChartDataEntry(value: 210.0),
        RadarChartDataEntry(value: 120.0),
        RadarChartDataEntry(value: 210.0),
        RadarChartDataEntry(value: 100.0),
        RadarChartDataEntry(value: 210.0)
    ]
)

// 2
let data = RadarChartData(dataSets: [greenDataSet, redDataSet])

// 3
radarChart.data = data

// 1
먼저 차트에 표시할 데이터항목을 포함하는 두가지 인스턴스를 만든다.

첫번째는 녹색 영역에 대한 포인트를 포함하고 두번째는 빨간색 영역에 대한 포인트를 포함한다.

이 예시에서 각각은 Double값으로만 구성되지만 아이콘을 추가하고 항목에 대한 임의 데이터를 정의할 수도 있다.

// 2

두 dataSet을 생성자로 전달하여 래핑한다.

 

// 3
마지막으로 생성된 데이터 객체에 속성을 설정한다.

 

DataSet 레이아웃 사용자지정

// 1
redDataSet.lineWidth = 2

// 2
let redColor = UIColor(red: 247/255, green: 67/255, blue: 115/255, alpha: 1)
let redFillColor = UIColor(red: 247/255, green: 67/255, blue: 115/255, alpha: 0.6)
redDataSet.colors = [redColor]
redDataSet.fillColor = redFillColor
redDataSet.drawFilledEnabled = true

// 3
redDataSet.valueFormatter = DataSetValueFormatter()

// 1

먼저 속성을 lineWidth 기본값에서 2로 늘린다.

점을 연결하는 선의 Width를 늘렸다.

 

// 2

빨간색으로 커스텀하기 위해 작성한 코드들

drawFilledEnabled 속성을 true로 설정하면 방사형 차트 내부가 fillColor로 칠해진다.

 

// 3

valueFormatter는 아래에서 설명 예정

 

 

차트 뷰 속성 구성

// 1
@IBOutlet weak var radarChart: RadarChartView!

// 2
radarChart.webLineWidth = 1.5
radarChart.innerWebLineWidth = 1.5
radarChart.webColor = .lightGray
radarChart.innerWebColor = .lightGray

// 3
let xAxis = radarChart.xAxis
xAxis.labelFont = .systemFont(ofSize: 9, weight: .bold)
xAxis.labelTextColor = .black
xAxis.xOffset = 10
xAxis.yOffset = 10
xAxis.valueFormatter = XAxisFormatter()

// 4
let yAxis = radarChart.yAxis
yAxis.labelFont = .systemFont(ofSize: 9, weight: .light)
yAxis.labelCount = 6
yAxis.drawTopYLabelEntryEnabled = false
yAxis.axisMinimum = 0
yAxis.valueFormatter = YAxisFormatter()

// 5
radarChart.rotationEnabled = false
radarChart.legend.enabled = false

 

Formatter

// 1
class DataSetValueFormatter: IValueFormatter {
    
    func stringForValue(_ value: Double,
                        entry: ChartDataEntry,
                        dataSetIndex: Int,
                        viewPortHandler: ViewPortHandler?) -> String {
        ""
    }
}

// 2
class XAxisFormatter: IAxisValueFormatter {
    
    let titles = "ABCDEFGHI".map { "Party \($0)" }
    
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        titles[Int(value) % titles.count]
    }
}

// 3
class YAxisFormatter: IAxisValueFormatter {
    
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        "\(Int(value)) $"
    }
}

 

 

SwiftUI에서의 사용

// 1
struct RadarView: UIViewRepresentable {
        
    // 2
    typealias UIViewType = RadarChartView
        
    // 3
    func makeUIView(context: UIViewRepresentableContext<RadarView>) -> RadarChartView {
        let radarChart = RadarChartView()
        // Setup radar Chart
        return radarChart
    }
    
    // 4
    @State var data: RadarChartData
    func updateUIView(_ uiView: RadarChartView, context: UIViewRepresentableContext<RadarView>) {
        uiView.data = data
    }
}

 

Ref

https://betterprogramming.pub/creating-a-radar-chart-in-swift-5791afcf92f0

Create a Radar Chart in Swift

https://github.com/danielgindi/Charts

GitHub - danielgindi/Charts: Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.