如何修复iOS Charts柱状图X轴标签重复与滚动时重叠问题

问题描述 #

使用Charts库绘制柱状图时，将X轴标签设置为月份，出现标签重复现象，滚动时标签还会溢出到相邻列中。

问题截图 #

当前代码 #

X轴初始化代码 #

let xAxis = barChartView.xAxis
xAxis.drawGridLinesEnabled = false
xAxis.drawLabelsEnabled = true
xAxis.drawAxisLineEnabled = false
xAxis.labelPosition = .bottom
xAxis.enabled = true
xAxis.axisLineColor = white
xAxis.labelTextColor = white
xAxis.decimals = 0
xAxis.granularity = 1
xAxis.granularityEnabled = true

获取数据后执行的代码 #

// indexCounter = 数据点数量
xAxis.valueFormatter = IndexAxisValueFormatter(values: xAxisLabelValues)
xAxis.setLabelCount(Int(indexCounter), force: true)
notifyDataSetChanged()

解决方法 #

• 移除强制设置标签数量的代码：setLabelCount(_:force:)传入force: true会强制生成指定数量的标签，打乱数据点与标签的匹配逻辑，直接删除这行代码，让Charts库自动根据数据量和图表宽度计算合适的标签数量。
• 确保标签数组与数据点数量匹配：检查xAxisLabelValues数组的长度是否和柱状图数据点数量完全一致，避免因索引不匹配导致重复显示。
• 旋转标签减少拥挤：如果标签内容较长（比如月份全称），可以设置标签旋转角度，缓解横向空间不足的问题：

  xAxis.labelRotationAngle = 45
  

• 关闭中心轴标签（按需）：若开启了centerAxisLabelsEnabled，可能导致标签与柱子不对齐，不需要的话可以关闭：

  xAxis.centerAxisLabelsEnabled = false
  

• 保留粒度设置：维持xAxis.granularity = 1和granularityEnabled = true，确保X轴每次只步进一个数据点，避免重复显示同一标签。

修改后的获取数据代码示例：

// indexCounter = 数据点数量
xAxis.valueFormatter = IndexAxisValueFormatter(values: xAxisLabelValues)
notifyDataSetChanged()

内容的提问来源于stack exchange，提问作者Mocha