具有分组值的条形图:居中对齐 x 轴标签
Barchart with grouped values: center-align x-axis labels
我正在使用 Charts 库生成条形图。这是我得到的设计,我正在尝试重新创建:
这是我设法构建的:
它越来越接近了,但我在显示条形图时遇到了严重的问题。例如,x 轴标签需要显示在组的中心,而不是垂直线的正下方。由于某种原因,最后一个灰色条根本没有显示。
代码:
import Charts
import UIKit
class DayAxisValueFormatter: NSObject, IAxisValueFormatter {
public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
let day = Int(value)
return ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"][day]
}
}
class ReportBarChart: UITableViewCell {
@IBOutlet private var chartView: BarChartView!
let groupSpace = 0.06
let barSpace = 0.02
let barWidth = 0.45
override func awakeFromNib() {
super.awakeFromNib()
chartView.backgroundColor = .reportCard
chartView.drawBarShadowEnabled = false
chartView.drawValueAboveBarEnabled = false
chartView.dragEnabled = false
chartView.setScaleEnabled(false)
chartView.pinchZoomEnabled = false
let xAxis = chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.labelFont = .systemFont(ofSize: 11, weight: .semibold)
xAxis.labelTextColor = .reportGrayText
xAxis.granularity = 1
xAxis.labelCount = 7
xAxis.valueFormatter = DayAxisValueFormatter()
let leftAxis = chartView.leftAxis
leftAxis.enabled = false
let rightAxis = chartView.rightAxis
rightAxis.enabled = true
rightAxis.labelFont = .systemFont(ofSize: 11, weight: .semibold)
rightAxis.labelTextColor = .reportGrayText
rightAxis.axisMinimum = 0
rightAxis.labelCount = 3
let legend = chartView.legend
legend.font = .systemFont(ofSize: 11, weight: .semibold)
legend.textColor = .white
legend.form = .circle
legend.xEntrySpace = 16
}
func configure() {
let currentValues = [
BarChartDataEntry(x: 0, y: 1),
BarChartDataEntry(x: 1, y: 2),
BarChartDataEntry(x: 2, y: 3),
BarChartDataEntry(x: 3, y: 4),
BarChartDataEntry(x: 4, y: 4),
BarChartDataEntry(x: 5, y: 1),
BarChartDataEntry(x: 6, y: 6),
]
let currentValuesSet = BarChartDataSet(entries: currentValues, label: "This week")
currentValuesSet.setColor(UIColor.reportOrange)
currentValuesSet.drawValuesEnabled = false
let previousValues = [
BarChartDataEntry(x: 0, y: 4),
BarChartDataEntry(x: 1, y: 3),
BarChartDataEntry(x: 2, y: 2),
BarChartDataEntry(x: 3, y: 1),
BarChartDataEntry(x: 4, y: 3),
BarChartDataEntry(x: 5, y: 2),
BarChartDataEntry(x: 6, y: 5),
]
let previousValuesSet = BarChartDataSet(entries: previousValues, label: "Last week")
previousValuesSet.setColor(UIColor.reportGrayChart)
previousValuesSet.drawValuesEnabled = false
let data = BarChartData(dataSets: [currentValuesSet, previousValuesSet])
data.highlightEnabled = false
data.barWidth = barWidth
data.groupBars(fromX: 0, groupSpace: groupSpace, barSpace: barSpace)
chartView.data = data
}
}
好的,找到答案了
xAxis.axisMinimum = 0
xAxis.axisMaximum = 7
xAxis.centerAxisLabelsEnabled = true
我正在使用 Charts 库生成条形图。这是我得到的设计,我正在尝试重新创建:
这是我设法构建的:
它越来越接近了,但我在显示条形图时遇到了严重的问题。例如,x 轴标签需要显示在组的中心,而不是垂直线的正下方。由于某种原因,最后一个灰色条根本没有显示。
代码:
import Charts
import UIKit
class DayAxisValueFormatter: NSObject, IAxisValueFormatter {
public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
let day = Int(value)
return ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"][day]
}
}
class ReportBarChart: UITableViewCell {
@IBOutlet private var chartView: BarChartView!
let groupSpace = 0.06
let barSpace = 0.02
let barWidth = 0.45
override func awakeFromNib() {
super.awakeFromNib()
chartView.backgroundColor = .reportCard
chartView.drawBarShadowEnabled = false
chartView.drawValueAboveBarEnabled = false
chartView.dragEnabled = false
chartView.setScaleEnabled(false)
chartView.pinchZoomEnabled = false
let xAxis = chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.labelFont = .systemFont(ofSize: 11, weight: .semibold)
xAxis.labelTextColor = .reportGrayText
xAxis.granularity = 1
xAxis.labelCount = 7
xAxis.valueFormatter = DayAxisValueFormatter()
let leftAxis = chartView.leftAxis
leftAxis.enabled = false
let rightAxis = chartView.rightAxis
rightAxis.enabled = true
rightAxis.labelFont = .systemFont(ofSize: 11, weight: .semibold)
rightAxis.labelTextColor = .reportGrayText
rightAxis.axisMinimum = 0
rightAxis.labelCount = 3
let legend = chartView.legend
legend.font = .systemFont(ofSize: 11, weight: .semibold)
legend.textColor = .white
legend.form = .circle
legend.xEntrySpace = 16
}
func configure() {
let currentValues = [
BarChartDataEntry(x: 0, y: 1),
BarChartDataEntry(x: 1, y: 2),
BarChartDataEntry(x: 2, y: 3),
BarChartDataEntry(x: 3, y: 4),
BarChartDataEntry(x: 4, y: 4),
BarChartDataEntry(x: 5, y: 1),
BarChartDataEntry(x: 6, y: 6),
]
let currentValuesSet = BarChartDataSet(entries: currentValues, label: "This week")
currentValuesSet.setColor(UIColor.reportOrange)
currentValuesSet.drawValuesEnabled = false
let previousValues = [
BarChartDataEntry(x: 0, y: 4),
BarChartDataEntry(x: 1, y: 3),
BarChartDataEntry(x: 2, y: 2),
BarChartDataEntry(x: 3, y: 1),
BarChartDataEntry(x: 4, y: 3),
BarChartDataEntry(x: 5, y: 2),
BarChartDataEntry(x: 6, y: 5),
]
let previousValuesSet = BarChartDataSet(entries: previousValues, label: "Last week")
previousValuesSet.setColor(UIColor.reportGrayChart)
previousValuesSet.drawValuesEnabled = false
let data = BarChartData(dataSets: [currentValuesSet, previousValuesSet])
data.highlightEnabled = false
data.barWidth = barWidth
data.groupBars(fromX: 0, groupSpace: groupSpace, barSpace: barSpace)
chartView.data = data
}
}
好的,找到答案了
xAxis.axisMinimum = 0
xAxis.axisMaximum = 7
xAxis.centerAxisLabelsEnabled = true