更改条形图设计 [iOS 个图表]
Change Bar Chart Design [iOS Charts]
我使用 Charts 中的 BarChartView
创建了条形图,但我不知道如何更改条形图设计。
我正在使用的设计在图像的右侧,而我需要实现左侧的设计。
@IBOutlet weak var charts: BarChartView!
charts.chartDescription?.enabled = false
charts.isUserInteractionEnabled = false
//charts.maxVisibleCount = 10
charts.drawBarShadowEnabled = false
charts.legend.enabled = false
let xAxis = charts.xAxis
xAxis.labelPosition = .bottom
xAxis.labelTextColor = .white
charts.xAxis.drawGridLinesEnabled = false
charts.rightAxis.drawGridLinesEnabled = false
charts.rightAxis.drawLabelsEnabled = false
charts.leftAxis.drawGridLinesEnabled = false
charts.leftAxis.drawLabelsEnabled = false
charts.leftAxis.axisMinimum = 0 ///
charts.rightAxis.axisMinimum = 0
charts.fitBars = true
charts.legend.textColor = .white
charts.setBarChartData(xValues: time, yValues: data, label: "Bar Chart")
任何帮助将不胜感激。
目前无法按照您想要的方式更改栏设计。
然而,有人确实尝试过类似的事情,通过更改网格线来绘制横条,但没有添加。
参见:Added drawGridLinesOnTopEnabled boolean flag to draw grid lines on top of Bar Charts.
你可以看看他的作品 here.
另一个手动解决方法,虽然不是最好的,但如果你绝对需要它应该工作,是在 chartView
(或任何其他 UIView
就此而言)
示例:
class HorizontalLines: UIView {
override func draw(_ rect: CGRect) {
//number of parts to divide the height of view by
let segments = 20
//number of lines ignoring the bottom most line
let numberOfLines = segments - 1
//draw the lines from left to right
for i in (1...numberOfLines).reversed() {
let multiplier = CGFloat(i)/CGFloat(segments)
let y = rect.size.height * multiplier
let startPoint = CGPoint(x:0, y:y)
let endPoint = CGPoint(x:rect.size.width, y:y)
let aPath = UIBezierPath()
aPath.move(to: startPoint)
aPath.addLine(to: endPoint)
aPath.close()
//line width
aPath.lineWidth = 1
aPath.stroke()
aPath.fill()
}
}
}
用法:
let lineView = HorizontalLines()
lineView.isUserInteractionEnabled = false
lineView.backgroundColor = .clear
lineView.translatesAutoresizingMaskIntoConstraints = false
chartView.addSubview(lineView)
lineView.leadingAnchor.constraint(equalTo: chartView.leadingAnchor).isActive = true
lineView.trailingAnchor.constraint(equalTo: chartView.trailingAnchor).isActive = true
lineView.topAnchor.constraint(equalTo: chartView.topAnchor).isActive = true
lineView.bottomAnchor.constraint(equalTo: chartView.bottomAnchor).isActive = true
请注意,这将在 chartView
.
上显示的任何内容上画一条线
因此,如果您决定显示条形数据标签,那么线条也会覆盖它。
希望这对您有所帮助:)
我使用 Charts 中的 BarChartView
创建了条形图,但我不知道如何更改条形图设计。
我正在使用的设计在图像的右侧,而我需要实现左侧的设计。
@IBOutlet weak var charts: BarChartView!
charts.chartDescription?.enabled = false
charts.isUserInteractionEnabled = false
//charts.maxVisibleCount = 10
charts.drawBarShadowEnabled = false
charts.legend.enabled = false
let xAxis = charts.xAxis
xAxis.labelPosition = .bottom
xAxis.labelTextColor = .white
charts.xAxis.drawGridLinesEnabled = false
charts.rightAxis.drawGridLinesEnabled = false
charts.rightAxis.drawLabelsEnabled = false
charts.leftAxis.drawGridLinesEnabled = false
charts.leftAxis.drawLabelsEnabled = false
charts.leftAxis.axisMinimum = 0 ///
charts.rightAxis.axisMinimum = 0
charts.fitBars = true
charts.legend.textColor = .white
charts.setBarChartData(xValues: time, yValues: data, label: "Bar Chart")
任何帮助将不胜感激。
目前无法按照您想要的方式更改栏设计。
然而,有人确实尝试过类似的事情,通过更改网格线来绘制横条,但没有添加。
参见:Added drawGridLinesOnTopEnabled boolean flag to draw grid lines on top of Bar Charts.
你可以看看他的作品 here.
另一个手动解决方法,虽然不是最好的,但如果你绝对需要它应该工作,是在 chartView
(或任何其他 UIView
就此而言)
示例:
class HorizontalLines: UIView {
override func draw(_ rect: CGRect) {
//number of parts to divide the height of view by
let segments = 20
//number of lines ignoring the bottom most line
let numberOfLines = segments - 1
//draw the lines from left to right
for i in (1...numberOfLines).reversed() {
let multiplier = CGFloat(i)/CGFloat(segments)
let y = rect.size.height * multiplier
let startPoint = CGPoint(x:0, y:y)
let endPoint = CGPoint(x:rect.size.width, y:y)
let aPath = UIBezierPath()
aPath.move(to: startPoint)
aPath.addLine(to: endPoint)
aPath.close()
//line width
aPath.lineWidth = 1
aPath.stroke()
aPath.fill()
}
}
}
用法:
let lineView = HorizontalLines()
lineView.isUserInteractionEnabled = false
lineView.backgroundColor = .clear
lineView.translatesAutoresizingMaskIntoConstraints = false
chartView.addSubview(lineView)
lineView.leadingAnchor.constraint(equalTo: chartView.leadingAnchor).isActive = true
lineView.trailingAnchor.constraint(equalTo: chartView.trailingAnchor).isActive = true
lineView.topAnchor.constraint(equalTo: chartView.topAnchor).isActive = true
lineView.bottomAnchor.constraint(equalTo: chartView.bottomAnchor).isActive = true
请注意,这将在 chartView
.
上显示的任何内容上画一条线
因此,如果您决定显示条形数据标签,那么线条也会覆盖它。
希望这对您有所帮助:)