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

// 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)

// 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)

class AxisXChartFormatter: NSObject, AxisValueFormatter {
    public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return "\(Int(value))日"
    }
}

// X軸ラベルのフォーマッター
chartView.xAxis.valueFormatter = AxisXChartFormatter()

class AxisXChartFormatter: NSObject, AxisValueFormatter {

    public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        if value == axis?.axisMinimum {
            return "開始"
        } else if value == axis?.axisMaximum {
            return "終了"
        }
        return ""
    }
}

struct MyLineChartView: UIViewRepresentable {
    
    private let list: [Double: Int] = [
        1735689600.0: 10, // 2024-07-01 00:00:00
        1735693200.0: 15, // 2024-07-01 01:00:00
        1735696800.0: 20, // 2024-07-01 02:00:00
        1735700400.0: 25, // 2024-07-01 03:00:00
        1735704000.0: 30, // 2024-07-01 04:00:00
        1735707600.0: 35, // 2024-07-01 05:00:00
        1735711200.0: 40, // 2024-07-01 06:00:00
        1735714800.0: 45, // 2024-07-01 07:00:00
        1735718400.0: 50, // 2024-07-01 08:00:00
        1735722000.0: 55, // 2024-07-01 09:00:00
        1735725600.0: 60, // 2024-07-01 10:00:00
        1735729200.0: 65, // 2024-07-01 11:00:00
        1735732800.0: 70, // 2024-07-01 12:00:00
        1735736400.0: 75, // 2024-07-01 13:00:00
        1735740000.0: 80, // 2024-07-01 14:00:00
        1735743600.0: 85, // 2024-07-01 15:00:00
        1735747200.0: 90, // 2024-07-01 16:00:00
        1735750800.0: 95, // 2024-07-01 17:00:00
        1735754400.0: 100, // 2024-07-01 18:00:00
        1735758000.0: 105, // 2024-07-01 19:00:00
        1735761600.0: 110, // 2024-07-01 20:00:00
        1735765200.0: 115, // 2024-07-01 21:00:00
        1735768800.0: 120, // 2024-07-01 22:00:00
        1735772400.0: 125, // 2024-07-01 23:00:00
    ]

    func makeUIView(context: Context) -> LineChartView {
        let chartView = LineChartView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
        let entries = list.sorted(by: { $0.key < $1.key }).map { key, value in
            return ChartDataEntry(x: Double(key), y: Double(value))
        }
        let dataSet = LineChartDataSet(entries: entries, label: "グラフ名")
        chartView.data = LineChartData(dataSet: dataSet)
        dataSet.drawValuesEnabled = true
        chartView.legend.horizontalAlignment = .center
        // グラフ名ラベルを非表示
        chartView.legend.enabled = false
        // Y軸右側ラベルを非表示
        chartView.rightAxis.enabled = false
        // x軸のラベルをbottomに表示
        chartView.xAxis.labelPosition = .bottom
        // y軸ラベルの表示個数
        chartView.xAxis.setLabelCount(8, force: true)

        // X軸ラベルのフォーマッター
        chartView.xAxis.valueFormatter = AxisXChartFormatter()
        // 表示エリア指定(3600秒 = 1時間)
        chartView.setVisibleXRangeMaximum(3600)
        chartView.setVisibleXRangeMinimum(3600)

        return chartView
    }
    
    func updateUIView(_ uiView: LineChartView, context: Context) {}
    
    class AxisXChartFormatter: NSObject, AxisValueFormatter {
        public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
            let date = Date(timeIntervalSince1970: TimeInterval(value))
            let df = DateFormatter()
            df.locale = Locale(identifier: "ja_JP")
            df.calendar = Calendar(identifier: .japanese)
            df.dateFormat = "HH時mm分"
            return df.string(from: date)
        }
    }
}

// 値ラベルの文字サイズを変更
dataSet.valueFont = UIFont.systemFont(ofSize: 16) // 文字サイズを16に設定
        
// 値ラベルの色を変更
dataSet.valueTextColor = UIColor.red // 色を赤に設定

import Charts

class CustomValueFormatter: NSObject, ValueFormatter {
    
    func stringForValue(_ value: Double,
                        entry: ChartDataEntry,
                        dataSetIndex: Int,
                        viewPortHandler: ViewPortHandler?) -> String {
        // アイコンがない場合は値ラベルを表示しないなども可能
        guard entry.icon != nil else { return "" }
        // 任意の形にフォーマットする
        return String(format: "%.1f", value)
    }
}

// グラフの値フォーマッター
lineDataSet.valueFormatter = CustomValueFormatter()

// ポインタデータ値の表示
lineDataSet.drawValuesEnabled = true
// lineDataSetを複数保持している場合の全てのdrawValuesEnabledの値を更新する
chartView.data?.setDrawValues(true)