다양한 그래프 그리기(라이브러리 Charts 사용, 파이차트, 원차트 포함)(쉬움주의, 따라만해)

안녕하세요 KataRN입니다.

 

 

오늘은 라이브러리 'Charts'를 사용하여 그래프를 만들어보겠습니다.

 

라이브러리 'Charts'의 링크입니다.

https://github.com/danielgindi/Charts

 

참고 : 아래 사이트의 글을 번역한 수준으로 거의 비슷하게 만들 예정입니다.

https://iosapptemplates.com/blog/swift-programming/ios-charts-swift

 

참고 : 라이브러리 없이 만든 파이차트(파이그래프, 원그래프)는 아래 링크를 참고해주세요.

https://katarnios.tistory.com/20

파이차트그리기(2) + UIBezierPath + 시간표그리기

 

오늘의 시나리오는 다음과 같습니다.

1.  Charts를 설치한다. (설치 방법 : https://katarnios.tistory.com/23)

2. 그래프를 3개 그린다.

끝

 

아래에 대한 데이터를 이용하여 그래프를 그리겠습니다.

• 플레이어 이름 : ["Ozil", "Ramsey", "Laca", "Auba", "Xhaka", "Torreira"]
• 득점수 = [6, 8, 26, 30, 8, 10]

 

1. 우선 Charts를 설치하고 아래 데이터들을 변수로 만들어 둡니다.

 

let players = ["Ozil", "Ramsey", "Laca", "Auba", "Xhaka", "Torreira"]
let goals = [6, 8, 26, 30, 8, 10]

 

2. 각각 그래프를 그립니다.

 

2-1 파이차트(원그래프)

 

2-1-1 위의 데이터들을 인자로 하는 함수를 하나 만듭시다.

func customizeChart(dataPoints: [String], values: [Double]) {
//dataPoints = players
//values = goals.map{Double($0)}
}

 

2-1-2 차트에 데이터를 넣기 위해 규격을 맞춥니다.

var dataEntries: [ChartDataEntry] = []
for i in 0..<dataPoints.count {
  let dataEntry = PieChartDataEntry(value: values[i], label: dataPoints[i], data:  dataPoints[i] as AnyObject)
  dataEntries.append(dataEntry)
}

 

2-1-3 차트에 데이터를 넣기 전 색상도 지정해줍니다.

let pieChartDataSet = PieChartDataSet(entries: dataEntries, label: nil)
pieChartDataSet.colors = colorsOfCharts(numbersOfColor: dataPoints.count)

private func colorsOfCharts(numbersOfColor: Int) -> [UIColor] {
  var colors: [UIColor] = []
  for _ in 0..<numbersOfColor {
    let red = Double(arc4random_uniform(256))
    let green = Double(arc4random_uniform(256))
    let blue = Double(arc4random_uniform(256))
    let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)
    colors.append(color)
  }
    return colors
}

 

2-1-4 차트에 넣을 데이터를 어떻게 표기 할지 정해줍니다.(저희는 none으로 넣겠습니다.)

let pieChartData = PieChartData(dataSet: pieChartDataSet)
let format = NumberFormatter()
format.numberStyle = .none
let formatter = DefaultValueFormatter(formatter: format)
pieChartData.setValueFormatter(formatter)

 

2-1-5 차트에 데이터를 넣어줍니다.

pieChartView.data = pieChartData

2-1-6 그리고 빌드를 하면?

파이차트의 최종코드는 맨 아래에 첨부해두겠습니다.

 

 

2-2 선그래프(lineChart, 라인차트)

 

위의 과정들과 겹치기 때문에 최종 코드만 표기하겠습니다.

import UIKit
import Charts
class LineChartViewController: UIViewController {

    @IBOutlet weak var lineChartView: LineChartView!
    override func viewDidLoad() {
      super.viewDidLoad()
      
      customizeChart(dataPoints: players, values: goals.map{ Double($0) })
    }
    
    func customizeChart(dataPoints: [String], values: [Double]) {
      
      var dataEntries: [ChartDataEntry] = []
      
      for i in 0..<dataPoints.count {
        let dataEntry = ChartDataEntry(x: values[i], y: Double(i))
        dataEntries.append(dataEntry)
      }
      
        let lineChartDataSet = LineChartDataSet(entries: dataEntries, label: nil)
      let lineChartData = LineChartData(dataSet: lineChartDataSet)
      lineChartView.data = lineChartData
    }

}

결과는?

 

2-3 막대그래프(BarChart, 막대차트, 바그래프)

 

위의 과정들과 겹치기 때문에 최종 코드만 표기하겠습니다.

import UIKit
import Charts

class BarChartViewController: UIViewController {

    @IBOutlet weak var barChartView: BarChartView!
    override func viewDidLoad() {
      super.viewDidLoad()
      
      //애니메이션 코드(빼도됩니다.)
      barChartView.animate(yAxisDuration: 2.0)
      barChartView.pinchZoomEnabled = false
      barChartView.drawBarShadowEnabled = false
      barChartView.drawBordersEnabled = false
      barChartView.doubleTapToZoomEnabled = false
      barChartView.drawGridBackgroundEnabled = true
      barChartView.chartDescription?.text = "Bar Chart View"
      
      setChart(dataPoints: players, values: goals.map { Double($0) })
    }
    
    
    func setChart(dataPoints: [String], values: [Double]) {
      barChartView.noDataText = "You need to provide data for the chart."
      
      var dataEntries: [BarChartDataEntry] = []
      
      for i in 0..<dataPoints.count {
        let dataEntry = BarChartDataEntry(x: Double(i), y: Double(values[i]))
        dataEntries.append(dataEntry)
      }
      
        let chartDataSet = BarChartDataSet(entries: dataEntries, label: "Bar Chart View")
      let chartData = BarChartData(dataSet: chartDataSet)
      barChartView.data = chartData
    }

}

결과는?

 

오늘은 라이브러리 'Charts'에 대해 알아봤습니다.

사실 차트를 당장 이용할 수 있어야 도움이 되지 않을까해서 자세하게 다루지는 않았습니다.

직접만든 코드가 아니다보니 설명하기가 힘들어서 간단하게 작성했습니다.(대충대충 복붙했네 라고 생각이 드실지도 모르겠습니다..)

그렇지만 이글을 보고 몇번 사용하시면 커스텀해서 쉽게 사용하실 수 있을것 같아서 이렇게라도 올리게 되었습니다.

 

오늘도 긴글 읽어주셔서 감사합니다.

 

(아래 코드는 파이차트 처음부터 끝까지입니다.)

import UIKit
import Charts

class PieChartViewController: UIViewController {

    @IBOutlet weak var pieChartView: PieChartView!
    
    override func viewDidLoad() {
      super.viewDidLoad()
      
      customizeChart(dataPoints: players, values: goals.map{ Double($0) })
    }
    
    func customizeChart(dataPoints: [String], values: [Double]) {
      
      // 1. Set ChartDataEntry
      var dataEntries: [ChartDataEntry] = []
      for i in 0..<dataPoints.count {
        let dataEntry = PieChartDataEntry(value: values[i], label: dataPoints[i], data:  dataPoints[i] as AnyObject)
        dataEntries.append(dataEntry)
      }
      
      // 2. Set ChartDataSet
        let pieChartDataSet = PieChartDataSet(entries: dataEntries, label: nil)
      pieChartDataSet.colors = colorsOfCharts(numbersOfColor: dataPoints.count)
      
      // 3. Set ChartData
      let pieChartData = PieChartData(dataSet: pieChartDataSet)
      let format = NumberFormatter()
      format.numberStyle = .none
      let formatter = DefaultValueFormatter(formatter: format)
      pieChartData.setValueFormatter(formatter)
      
      // 4. Assign it to the chart's data
      pieChartView.data = pieChartData
    }
    
    private func colorsOfCharts(numbersOfColor: Int) -> [UIColor] {
      var colors: [UIColor] = []
      for _ in 0..<numbersOfColor {
        let red = Double(arc4random_uniform(256))
        let green = Double(arc4random_uniform(256))
        let blue = Double(arc4random_uniform(256))
        let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)
        colors.append(color)
      }
      return colors
    }

}