如何在条形图的顶部显示条形图的值?

时间:2019-04-15 12:11:32

标签: ios swift ios-charts

我正在使用iOS图表库在我的应用程序中添加自定义图表,我创建了一个条形图,该条形图可以按我的要求工作。由于某种原因,我已经颠倒了该图,所以现在的问题是值基于创建的条形图显示在图表上,我想将这些值显示在条形图的顶部。这是我用来创建图形的代码

@IBOutlet var barChartView: BarChartView!

let unitsSold = [20, 4, 6, 3, 12, 50, 25, 57, 60, 28, 17, 47]
let unitsBought = [10.0, 14.0, 60.0, 13.0, 2.0, 10.0, 15.0, 18.0, 25.0, 05.0, 10.0, 19.0]
let xaxisValue: [String] = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]

//MARK:- View Life Cycle -
override func viewDidLoad() {
    super.viewDidLoad()

    setupView()
}


//MARK:- General Methods -
func setupView() {

    //legend
    let legend = barChartView.legend
    legend.enabled = true
    legend.horizontalAlignment = .right
    legend.verticalAlignment = .bottom
    legend.orientation = .horizontal
    legend.drawInside = true
    legend.yOffset = 10.0;
    legend.xOffset = 10.0;
    legend.yEntrySpace = 0.0;
    legend.textColor = UIColor.white

    // Y - Axis Setup
    let yaxis = barChartView.leftAxis
    yaxis.spaceTop = 0.35
    yaxis.axisMinimum = 0
    yaxis.drawGridLinesEnabled = false
    yaxis.labelTextColor = UIColor.white
    yaxis.axisLineColor = UIColor.white
    yaxis.labelPosition = .insideChart
    yaxis.enabled = false
   // YAxis leftAxis = barChart.getAxisLeft();
    barChartView.rightAxis.enabled = false

    // X - Axis Setup
    let xaxis = barChartView.xAxis
    let formatter = CustomLabelsXAxisValueFormatter()//custom value formatter
    formatter.labels = self.xaxisValue
    xaxis.valueFormatter = formatter

    xaxis.drawGridLinesEnabled = false
    xaxis.labelPosition = .top
    xaxis.labelTextColor = UIColor.white
    xaxis.centerAxisLabelsEnabled = true
    xaxis.axisLineColor = UIColor.white
    xaxis.granularityEnabled = true
    xaxis.enabled = true

    barChartView.delegate = self
    barChartView.noDataText = "You need to provide data for the chart."
    barChartView.noDataTextColor = UIColor.white
    barChartView.chartDescription?.textColor = UIColor.clear

    setChart()
}

func setChart() {
    barChartView.noDataText = "Loading...!!"
    var dataEntries: [BarChartDataEntry] = []
    var dataEntries1: [BarChartDataEntry] = []

    for i in 0..<self.xaxisValue.count {

        let dataEntry = BarChartDataEntry(x: Double(i) , y: Double(self.unitsSold[i]))
        dataEntries.append(dataEntry)

        let dataEntry1 = BarChartDataEntry(x: Double(i) , y: Double(self.unitsBought[i]))
        dataEntries1.append(dataEntry1)

    }

    let chartDataSet = BarChartDataSet(values: dataEntries, label: "Sold")
    let chartDataSet1 = BarChartDataSet(values: dataEntries1, label: "Bought")

    let dataSets: [BarChartDataSet] = [chartDataSet,chartDataSet1]
    chartDataSet.colors = [UIColor(red: 0/255, green: 255/255, blue: 0/255, alpha: 0.5)]
    chartDataSet1.colors = [UIColor(red: 255/255, green: 0/255, blue: 0/255, alpha: 0.8)]


    let chartData = BarChartData(dataSets: dataSets)

    let groupSpace = 0.4
    let barSpace = 0.02
    let barWidth = 0.2

    chartData.barWidth = barWidth
    chartData.setDrawValues(true)
    barChartView.xAxis.axisMinimum = 0.0
    barChartView.xAxis.axisMaximum = 0.0 + chartData.groupWidth(groupSpace: groupSpace, barSpace: barSpace) * Double(self.xaxisValue.count)

    chartData.groupBars(fromX: 0.0, groupSpace: groupSpace, barSpace: barSpace)
    barChartView.xAxis.granularity = barChartView.xAxis.axisMaximum / Double(self.xaxisValue.count)
    barChartView.drawValueAboveBarEnabled = true
    barChartView.keepPositionOnRotation = true
    barChartView.clipValuesToContentEnabled = true
    barChartView.data = chartData
    barChartView.getAxis(.left).inverted = true

    barChartView.notifyDataSetChanged()
    barChartView.setVisibleXRangeMaximum(4)
    barChartView.animate(yAxisDuration: 1.0, easingOption: .linear)
    chartData.setValueTextColor(UIColor.yellow)
}

这是上面代码的输出

enter image description here

我想将标签显示为下图(当图形处于反转状态时)

enter image description here

请让我知道如何实现这一目标。

2 个答案:

答案 0 :(得分:1)

我认为目前无法使用Charts。值在drawValues(context: CGContext)函数的BarChartRender.swift中呈现,但始终位于条形上方。如果左轴反转,则不会在下方渲染它们。如果您想要这种行为,则应该自己更改代码的这一部分来实现:

drawValue(
    context: context,
    value: formatter.stringForValue(
    val,
    entry: e,
    dataSetIndex: dataSetIndex,
    viewPortHandler: viewPortHandler),
    xPos: x,
    yPos: val >= 0.0
    ? (rect.origin.y + rect.size.height + posOffset)
    : (rect.origin.y + negOffset), // Those lines should do what you're trying to achieve
    font: valueFont,
    align: .center,
    color: dataSet.valueTextColorAt(j))

答案 1 :(得分:0)

我认为您必须设置 - 如下所示

set = BarChartDataSet(entries: yData , label: "Dataset")

//make this enable
set.drawValuesEnabled = true