[iOS/Swift] DGCharts 그래프 라이브러리, Line Graph 색상 변경, 라인 차트 선 색 변경, 여러 줄 색상 변경

예시

글이 이해가지 않으면 지난 글을 확인해 주세요.

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

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

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

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

 

 

한 줄 색상 변경

선 색

lineChartdataSet.colors = [.red]

 데이터 셋에 colors 메서드를 사용해서 색상을 변경할 수 있습니다.

 

한 줄에 여러 색 적용

lineChartdataSet.colors = [.red, .blue, .black, .darkGray]

 Array에 색을 채워주면 포인트마다 색이 변경됩니다.  안에 색을 반복해서 출력합니다.

 

여러 줄에 색 적용

var colors: [UIColor] = [.red, .blue]

 여러 줄에 색을 하나씩 주고 싶어서 색상 Array를 따로 선언했습니다.

 

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

 그리고 출력하고 싶은 데이터를 만들면서 색을 하나씩 꺼내어 적용합니다.

 

 

한 줄 색상 적용 코드

//
//  LineChartViewController.swift
//  ChartsLibTest
//
//  Created by 김지태 on 2022/11/10.
//

import UIKit
import Charts

class LineChartViewController: 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 priceData: [Double]! = [100, 345, 20, 120, 90, 300, 450, 220, 120]


    override func viewDidLoad() {
        super.viewDidLoad()

        // 기본 출력 텍스트
        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(priceData.count, force: false)

        
        
        self.setLineData(lineChartView: self.myLineChart, lineChartDataEntries: self.entryData(values: self.priceData))
    }


    // 데이터 적용하기
    func setLineData(lineChartView: LineChartView, lineChartDataEntries: [ChartDataEntry]) {
        // Entry들을 이용해 Data Set 만들기
        
        let lineChartdataSet = LineChartDataSet(entries: lineChartDataEntries, label: "매출")
        
        // 데이터셋에 색상 지정
        lineChartdataSet.colors = [.red, .blue]
        
        // DataSet을 차트 데이터로 넣기
        let lineChartData = LineChartData(dataSet: lineChartdataSet)
        
        // 데이터 출력
        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
    }

}

 

여러 줄 색상 적용 코드

//
//  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]
    
    var colors: [UIColor] = [.red, .blue]
    
    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 (index, entry) in lineChartDataEntries.enumerated() {
            let lineChartdataSet = LineChartDataSet(entries: entry, label: "매출")
            lineChartdataSet.colors = [colors[index]]
            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
    }
}

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

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