更改条形图设计[iOS图表]

时间:2019-03-13 09:10:12

标签: ios swift charts ios-charts

我使用Charts中的BarChartView创建了一个条形图,但是我不知道如何更改条形设计。

我正在使用的设计显示在图像的右侧,而我需要实现左侧的设计。

lr

@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")

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

当前,无法以所需方式更改条形设计。

但是,有人确实尝试通过更改网格线以绘制条形来尝试类似的操作,但未添加。
参见: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上显示的所有内容上划一条线。
因此,如果您决定显示条形数据标签,那么线条也将覆盖它。

我希望这会对您有所帮助:)