📱

【Swift】【iPhone】Chartsライブラリを使用するサンプルコード

2024/02/12に公開

Chartsライブラリを使用するサンプルコード

ライブラリを使用するので
Podfileに下記を追記する。

pod 'DGCharts'

ライブラリをインストールする。

$ pod install

インストールが完了したら、XcodeでもDGChartsライブラリが確認できる。

折れ線グラフ

ChartViewController.swift
import UIKit
import DGCharts

class ChartViewController: UIViewController {

    // チャート
    var chartView: LineChartView!
    // チャートデータ
    var lineDataSet: LineChartDataSet!
    
    // 折れ線グラフで表示するデータ(Y軸)
    private let data: [Double] = [100.0, 65.0, 90.0, 30.0, 45.0]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        drawChart(y: data)
    }
    
    func drawChart(y: [Double]) {
            
        // チャートビューのサイズと位置を定義
        self.chartView = LineChartView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 400))
        chartView.center = self.view.center
        
        // チャートに渡す用の配列を定義
        var dataEntries: [ChartDataEntry] = []
        
        // Y軸のデータリストからインデックスと値を取得し配列に格納
        for (index, value) in y.enumerated() {
            // X軸は配列のインデックス番号
            let dataEntry = ChartDataEntry(x: Double(index), y: value)
            dataEntries.append(dataEntry)
        }

        // 折れ線グラフ用のデータセット labelはグラフ名
        lineDataSet = LineChartDataSet(entries: dataEntries, label: "グラフ名")
        // グラフに反映
        chartView.data = LineChartData(dataSet: lineDataSet)
        
        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        // x軸のラベル数をデータの数にする
        chartView.xAxis.labelCount = dataEntries.count - 1

        self.view.addSubview(self.chartView)
    }
}

棒グラフ

ChartViewController.swift
import UIKit
import DGCharts

class ChartViewController: UIViewController {

    // チャート
    var chartView: BarChartView!
    // チャートデータ
    var barDataSet: BarChartDataSet!
    
    // 棒グラフで表示するデータ(Y軸)
    private let data: [Double] = [100.0, 65.0, 90.0, 30.0, 45.0]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        drawChart(y: data)
    }
    
    func drawChart(y: [Double]) {
            
        // チャートビューのサイズと位置を定義
        self.chartView = BarChartView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 400))
        chartView.center = self.view.center
        
        // チャートに渡す用の配列を定義
        var dataEntries: [BarChartDataEntry] = []
        
        // Y軸のデータリストからインデックスと値を取得し配列に格納
        for (index, value) in y.enumerated() {
            // X軸は配列のインデックス番号
            let dataEntry = BarChartDataEntry(x: Double(index), y: value)
            dataEntries.append(dataEntry)
        }

        // 棒グラフ用のデータセット labelはグラフ名
        barDataSet = BarChartDataSet(entries: dataEntries, label: "グラフ名")
        // グラフに反映
        chartView.data = BarChartData(dataSet: barDataSet)

        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        // x軸のラベル数をデータの数にする
        chartView.xAxis.labelCount = dataEntries.count - 1

        self.view.addSubview(self.chartView)
    }
}
LineChart BarChartView

Discussion