iOS Charts库LineChartView自定义X轴标签与网格线位置问题

我之前也碰到过一模一样的需求——完全掌控X轴的刻度和网格线位置，不想被组件自动生成的条目牵着走。下面以iOS的Charts库为例（Android的MPAndroidChart思路完全一致，只是语法稍有不同），给你一套可行的实现方案：

1. 先确定目标刻度的日期集合 #

首先把你需要的刻度位置列出来：当前季度的每月第一天，加上你指定的其他日期。然后把这些日期转换成X轴能识别的数值（比如以季度第一天为基准的天数差，或者直接用时间戳）。举个例子：

// 假设当前季度是2024年4-6月，我们要的刻度点是4/1、4/15、5/1、5/20、6/1、6/10
let targetDates: [Date] = [
    Calendar.current.date(from: DateComponents(year: 2024, month: 4, day: 1))!,
    Calendar.current.date(from: DateComponents(year: 2024, month: 4, day: 15))!,
    Calendar.current.date(from: DateComponents(year: 2024, month: 5, day: 1))!,
    Calendar.current.date(from: DateComponents(year: 2024, month: 5, day: 20))!,
    Calendar.current.date(from: DateComponents(year: 2024, month: 6, day: 1))!,
    Calendar.current.date(from: DateComponents(year: 2024, month: 6, day: 10))!
]

// 把日期转成X轴数值（这里用季度第一天为起点的天数差）
let quarterStart = Calendar.current.date(from: DateComponents(year: 2024, month: 4, day: 1))!
let xAxisValues = targetDates.map { date in
    Calendar.current.dateComponents([.day], from: quarterStart, to: date).day!
}

2. 写一个自定义的X轴标签格式化器 #

创建一个实现IAxisValueFormatter的类，负责把X轴的数值转换成你要的「月份+日期」文本：

class CustomXAxisFormatter: NSObject, IAxisValueFormatter {
    private let targetDates: [Date]
    private let quarterStart: Date
    private let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "MM/dd" // 可以改成你喜欢的格式，比如"Apr 1"
        return formatter
    }()
    
    init(targetDates: [Date], quarterStart: Date) {
        self.targetDates = targetDates
        self.quarterStart = quarterStart
        super.init()
    }
    
    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        // 找到对应数值的日期
        guard let matchDate = targetDates.first(where: { date in
            let dayDiff = Calendar.current.dateComponents([.day], from: quarterStart, to: date).day!
            return Double(dayDiff) == value
        }) else {
            return ""
        }
        return dateFormatter.string(from: matchDate)
    }
}

3. 给LineChartView配置自定义X轴 #

最后把这些配置应用到图表上，关键是禁用自动刻度生成，强制使用我们自定义的条目：

let lineChartView = LineChartView()

// 核心X轴配置
let xAxis = lineChartView.xAxis
xAxis.valueFormatter = CustomXAxisFormatter(targetDates: targetDates, quarterStart: quarterStart)
xAxis.customAxisEntries = xAxisValues.map { Double($0) } // 设置自定义刻度位置
xAxis.axisMinimum = Double(xAxisValues.first!)
xAxis.axisMaximum = Double(xAxisValues.last!)
xAxis.axisAutoScaleEnabled = false // 必须关掉自动缩放，不然自定义条目会失效
xAxis.setLabelCount(xAxisValues.count, force: true)
xAxis.drawGridLinesEnabled = true // 确保网格线正常显示

// 剩下的就是设置你的支出数据了
// ...

这样设置完，X轴就只会在你指定的日期位置显示标签，网格线也会精准对齐这些位置，完全符合你的需求。如果是Android平台，只需要把对应类换成MPAndroidChart的IAxisValueFormatter和调用XAxis.setCustomAxisEntries()方法就行，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Sergio B.