【Swift UI】Charts(DGCharts)で棒グラフを実装する方法!
この記事からわかること
- Swift/UIKitでChartsライブラリの使い方
- 棒グラフの実装方法
- デザインやレイアウト、ラベル、フォント、カラーの変更方法
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
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) {}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。