• 2023/11/27
• 4分

【Swift UI】Charts(DGCharts)で棒グラフを実装する方法！

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：15.0.1
• iOS：17.1
• Swift：5.9
• macOS：Sonoma 14.1

Swift UIで実装する

Charts(DGCharts)ライブラリをSwift UIで利用しつつ棒グラフを実装する方法をまとめていきます。Swift UIで実装するためにUIViewRepresentableを使用していますが詳細な使用方法は以下の記事を参考にしてください。

棒グラフの実装方法

今回は以下のような棒グラフを実装していきます。

実装の詳細はコメントに残しておきました。

struct MyBarChartView: UIViewRepresentable {
    
    private let demoData: [String: Int] = [
        "Category1": 30,
        "Category2": 20,
        "Category3": 15,
        "Category4": 10,
    ]
    
    
    func makeUIView(context: Context) -> BarChartView {
        // チャートビューのサイズと位置を定義
        let chartView = BarChartView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
        
        // データがない場合の設定
        guard demoData.count != 0 else {
            chartView.noDataText = "データがありません"
            chartView.noDataTextColor = .red
            chartView.noDataFont = .boldSystemFont(ofSize: 15)
            return chartView
        }
        
        // チャートに渡す用の配列を定義
        var entries: [ChartDataEntry] = []
        // ラベルとして下に配置する用
        var keys: [String] = []
        
        // Y軸のデータリストからインデックスと値を取得し配列に格納
        for (index, item) in demoData.enumerated() {
            // X軸は配列のインデックス番号
            let entry = BarChartDataEntry(x: Double(index), y: Double(item.value))
            keys.append(String(item.key))
            entries.append(entry)
        }
        
        let dataSet = BarChartDataSet(entries: entries, label: "棒グラフの名前")
        
        
        chartView.data = BarChartData(dataSet: dataSet)
        
        // X軸にラベルを明示的につける
        chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: keys)
        // カラーリストの設定 (既存の色は4色しかないため5個以上の際は自身で定義が必要)
        dataSet.colors = ChartColorTemplates.material() // or [UIColor]
        // グラフ内に値を表示しない
        dataSet.drawValuesEnabled = true
        // 値のテキストカラー
        dataSet.valueTextColor = .black
        // 値のテキストフォント
        dataSet.valueFont = .boldSystemFont(ofSize: 12)
        
        // タッチでハイライトしない
        chartView.highlightPerTapEnabled = false
        // ラベルの表示位置
        chartView.legend.horizontalAlignment = .center
        
        // グラフ名ラベルを非表示
        chartView.legend.enabled = false
        // Y軸右側ラベルを非表示
        chartView.rightAxis.enabled = false
        
        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        // x軸のラベル数をデータの数にする
        chartView.xAxis.labelCount = entries.count - 1
        
        // y軸ラベルの表示個数
        chartView.leftAxis.labelCount = 5
        
        // Y軸ラベルの変化幅を調整5単位に
        chartView.leftAxis.granularity = 5
        
        // アニメーション
        chartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)
        
        return chartView
    }
    
    func updateUIView(_ uiView: BarChartView, context: Context) {}
    
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。