【Swift UI】Charts(DGCharts)でラベルをカスタマイズする方法!AxisValueFormatter

この記事からわかること

  • Swift/UIKitChartsライブラリ使い方
  • ラベル文言カスタマイズする方法
  • ラベルのデザインサイズカラーフォント変更方法
  • AxisValueFormatterの使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

DGChartsでグラフのX軸とY軸に表示されるラベルのカスタマイズ方法をまとめていきます。

【Swift UI】Charts(DGCharts)でラベルをカスタマイズする方法!AxisValueFormatter

グラフのX軸のカスタマイズ

X軸(縦側)に配置されるラベルをカスタマイズするにはxAxisからXAxis型を参照して設定していきます。

// MARK: - X軸
// x軸のラベルをbottomに表示
chartView.xAxis.labelPosition = .bottom
// X軸最大値
chartView.xAxis.axisMaximum = 4
// X軸最小値
chartView.xAxis.axisMinimum = 0
// X軸ラベルの表示個数
chartView.xAxis.labelCount = 5
// X軸ラベルを表示(デフォルト)
chartView.xAxis.enabled = true
// X軸ラベルカラー
chartView.xAxis.labelTextColor = .white
// X軸ラベル間隔
chartView.xAxis.granularity = 1.0
// X軸ラベルフォント
chartView.xAxis.labelFont = .boldSystemFont(ofSize: 12)

グラフのY軸のカスタマイズ

Y軸(横側)に配置されるラベルは右側と左側があり、それぞれカスタマイズするにはleftAxisrightAxisからYAxis型を参照して設定していきます。

// MARK: - Y軸
// Y左軸最大値
chartView.leftAxis.axisMaximum = 100
// Y左軸最小値
chartView.leftAxis.axisMinimum = 0
// Y軸ラベルの表示個数
chartView.leftAxis.labelCount = 10
// Y軸右側ラベルを非表示
chartView.rightAxis.enabled = false
// Y軸左側ラベルを表示(デフォルト)
chartView.leftAxis.enabled = true
// Y軸右側ラベルカラー
chartView.rightAxis.labelTextColor = .white
// Y軸左側ラベルカラー
chartView.leftAxis.labelTextColor = .white
// Y軸右側ラベル間隔
chartView.rightAxis.granularity = 10.0
// Y軸左側ラベル間隔
chartView.leftAxis.granularity = 10.0
// Y軸右側ラベルフォント
chartView.rightAxis.labelFont = .boldSystemFont(ofSize: 12)
// Y軸左側ラベルフォント
chartView.leftAxis.labelFont = .boldSystemFont(ofSize: 12)

ラベルの値を自由に変更するには?

グラフのX軸とY軸に配置されるラベルはグラフデータに基づいて自動的に表示されます。しかし例えば横軸を時間などにしたい場合など、任意の値に変更したい場合に対応できるようにDGChartsではAxisValueFormatterプロトコルが用意されています。

使用方法は簡単でAxisValueFormatterプロトコルに準拠したクラスを作成しvalueFormatterプロパティにセットするだけです。AxisValueFormatterプロトコルではstringForValueメソッドの実装が必要で、この返り値がラベルに表示される文字列になります。

class AxisXChartFormatter: NSObject, AxisValueFormatter {
    public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return "\(Int(value))日"
    }
}
// X軸ラベルのフォーマッター
chartView.xAxis.valueFormatter = AxisXChartFormatter()
【Swift UI】Charts(DGCharts)でラベルをカスタマイズする方法!AxisValueFormatter

最小値と最大値のみにラベルを付与する

グラフのラベルの最小値と最大値のみにラベルを表示したい場合stringForValueの引数AxisBaseからグラフに適応されている最小値と最大値を取得できるのでその値と一致する時のみラベル文字列を返すようにすればOKです。

class AxisXChartFormatter: NSObject, AxisValueFormatter {

    public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        if value == axis?.axisMinimum {
            return "開始"
        } else if value == axis?.axisMaximum {
            return "終了"
        }
        return ""
    }
}
【Swift UI】Charts(DGCharts)でラベルをカスタマイズする方法!AxisValueFormatter

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index