[iOS/Swift] DGCharts 그래프 라이브러리, Line Graph 다중 표시하기, 차트 그래프 라이브러리 여러 줄 표시하기

Line Chart 두줄

 지난 글에서 이어서 작성합니다. 모든 내용을 담지 않기 때문에 지난 글을 확인해 주세요. 지난 글에서 코드를 수정하면서 진행합니다.

 

[iOS/Swift] Charts 그래프 라이브러리 Line Chart 표시하기, 라인 차트 그리기 — Jiwift (tistory.com)

[iOS/Swift] Charts 그래프 라이브러리 Line Chart 표시하기, 라인 차트 그리기

 

var priceDataOne: [Double]! = [100, 345, 20, 120, 90, 300, 450, 220, 120]
var priceDataTwo: [Double]! = [250, 200, 200, 300, 150, 250, 200, 400, 200]

 우선 보여주고 싶은 데이터를 준비합니다. valueFormatter는 같은 것을 사용하기 때문에 데이터만 추가로 가지고 있으면 됩니다.

 

// 추가하고 싶은 데이터
let lineChartDataEntries: [[ChartDataEntry]] = [self.entryData(values: self.priceDataOne),
                                                self.entryData(values: self.priceDataTwo)]

// 라인 차트 그리기
self.setLineData(lineChartView: self.myLineChart, lineChartDataEntries: lineChartDataEntries)

 chart 셋팅해주는 부분입니다.  

 

// 데이터 적용하기
func setLineData(lineChartView: LineChartView, lineChartDataEntries: [[ChartDataEntry]]) {
    // Entry들을 이용해 Data Set 만들기
    var dataSets: [LineChartDataSet] = []

    // 데이터 생성
    for entry in lineChartDataEntries {
    	let lineChartdataSet = LineChartDataSet(entries: entry, label: "매출")
    	dataSets.append(lineChartdataSet)
    }

    // DataSet을 차트 데이터로 넣기
    let lineChartData = LineChartData(dataSets: dataSets)

    // 데이터 출력
    lineChartView.data = lineChartData
}

 데이터를 적용하는 부분입니다. 

 

깃 허브에서 프로젝트를 확인할 수 있습니다.

SwiftExample/ChartLibraryStudy at main · wlxo0401/SwiftExample (github.com)

GitHub - wlxo0401/SwiftExample: My study, record and share

 

 

//
//  MultiLineChartViewController.swift
//  ChartsLibTest
//
//  Created by 김지태 on 2023/01/09.
//

import UIKit
import Charts

class MultiLineChartViewController: UIViewController {

    @IBOutlet weak var myLineChart: LineChartView!
    
    var dayData: [String] = ["11월02일", "11월03일", "11월04일", "11월05일", "11월06일", "11월07일", "11월08일", "11월09일", "11월10일"]
    
    var priceDataOne: [Double]! = [100, 345, 20, 120, 90, 300, 450, 220, 120]
    var priceDataTwo: [Double]! = [250, 200, 200, 300, 150, 250, 200, 400, 200]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        // 기본 출력 텍스트
        self.myLineChart.noDataText = "출력 데이터가 없습니다."
        // 기본 출력 텍스트 폰트
        self.myLineChart.noDataFont = .systemFont(ofSize: 20)
        // 기본 출력 텍스트 색상
        self.myLineChart.noDataTextColor = .lightGray
        // Chart 뒷 배경 색상
        self.myLineChart.backgroundColor = .white
        // 값마다 구분하고 싶은 valueFormatter 예) 날짜, 이름
        self.myLineChart.xAxis.valueFormatter = IndexAxisValueFormatter(values: dayData)
        // 값마다 구분하고 싶은 valueFormatter를 개수만큼 출력
        self.myLineChart.xAxis.setLabelCount(dayData.count, force: false)

        // 추가하고 싶은 데이터
        let lineChartDataEntries: [[ChartDataEntry]] = [self.entryData(values: self.priceDataOne),
                                                        self.entryData(values: self.priceDataTwo)]
        
        // 라인 차트 그리기
        self.setLineData(lineChartView: self.myLineChart, lineChartDataEntries: lineChartDataEntries)
    }

    // 데이터 적용하기
    func setLineData(lineChartView: LineChartView, lineChartDataEntries: [[ChartDataEntry]]) {
        // Entry들을 이용해 Data Set 만들기
        var dataSets: [LineChartDataSet] = []
        
        // 데이터 생성
        for entry in lineChartDataEntries {
            let lineChartdataSet = LineChartDataSet(entries: entry, label: "매출")
            dataSets.append(lineChartdataSet)
        }
        
        // DataSet을 차트 데이터로 넣기
        let lineChartData = LineChartData(dataSets: dataSets)
        
        // 데이터 출력
        lineChartView.data = lineChartData
    }

    // entry 만들기
    func entryData(values: [Double]) -> [ChartDataEntry] {
        // entry 담을 array
        var lineDataEntries: [ChartDataEntry] = []
        // 담기
        for i in 0 ..< values.count {
            let lineDataEntry = ChartDataEntry(x: Double(i), y: values[i])
            lineDataEntries.append(lineDataEntry)
        }
        // 반환
        return lineDataEntries
    }
}