2016-04-28 6 views
0

Ich habe eine kombinierte Grafik, die ein Linien- und Balkendiagramm verwendet, um yValues ​​anzuzeigen. In einigen Fällen überlappen sich die Linien- und Balkendiagrammwerte, gibt es eine Möglichkeit, den vertikalen Abstand der Beschriftungen für die yValues ​​so einzustellen, dass sie nicht übereinander liegen (wie Jan bis Oct im Bild)?Ändern yValue Label vertikalen Abstand in kombinierten Diagramm (IOS-Charts)

Combined Chart Image

ich den Charts Rahmen bin mit (ehemals ios-Charts), hier ist der Code zur Einrichtung der CombineChartView:

 let xValues = getXAxisLabelsForYear(year) 
     let runningTotalsByMonth = getRunningTotalByMonthForYear(year)! 
     var yValsBar = [BarChartDataEntry]() 
     var yValsLine = [ChartDataEntry]() 

     for i in 0 ..< xValues.count { 
      let yBarDataEntry = BarChartDataEntry(value: monthlyWinnings[i], xIndex: i) 
      yValsBar.append(yBarDataEntry) 
      let yLineDataEntry = ChartDataEntry(value: runningTotalsByMonth[i], xIndex: i) 
      yValsLine.append(yLineDataEntry) 
     } 
     let barChartDataSet = BarChartDataSet(yVals: yValsBar, label: "Monthly Winnings") 

     //setup bar chart 
     var barChartColors = [UIColor]() 
     for i in monthlyWinnings { 
      if i >= 0.0 { 
       barChartColors.append(myGreen) 
      } else { 
       barChartColors.append(UIColor.redColor()) 
      } 
     } 
     barChartDataSet.colors = barChartColors 
     barChartDataSet.barShadowColor = UIColor.clearColor() 
     barChartDataSet.valueFont = UIFont.systemFontOfSize(10.0) 

     //setup line chart 
     let lineChartDataSet = LineChartDataSet(yVals: yValsLine, label: "Cumulative Winnings") 
     var lineChartColors = [UIColor]() 
     for i in runningTotalsByMonth { 
      if i >= 0.0 { 
       lineChartColors.append(myGreen) 
      } else { 
       lineChartColors.append(UIColor.redColor()) 
      } 
     } 
     lineChartDataSet.colors = lineChartColors 
     lineChartDataSet.circleColors = [UIColor.blueColor()] 
     lineChartDataSet.drawCircleHoleEnabled = false 
     lineChartDataSet.circleRadius = 5 
     lineChartDataSet.lineWidth = 2 
     lineChartDataSet.valueFont = UIFont.systemFontOfSize(10.0) 

     //combine data 
     let data = CombinedChartData(xVals: xValues) 
     data.barData = BarChartData(xVals: xValues, dataSet: barChartDataSet) 
     data.lineData = LineChartData(xVals: xValues, dataSet: lineChartDataSet) 

     combinedChartView.data = data 

     //format the chart 
     combinedChartView.xAxis.setLabelsToSkip(0) 
     combinedChartView.xAxis.labelPosition = .Bottom 
     combinedChartView.descriptionText = "" 
     combinedChartView.rightAxis.drawLabelsEnabled = false 
     combinedChartView.rightAxis.drawGridLinesEnabled = false 
     combinedChartView.drawGridBackgroundEnabled = false 
     combinedChartView.leftAxis.drawZeroLineEnabled = true 
     combinedChartView.xAxis.drawGridLinesEnabled = false 
     combinedChartView.xAxis.wordWrapEnabled = true 
+0

Verwenden Sie Auto-Layout oder die Bilder manuell setzen? –

+0

Wenn Sie weitere Informationen darüber einreichen könnten, wie Sie diese Werte einstellen, würde das auch helfen. Sind der Balken und die Beschriftung/Linie Punkt und Beschriftung in einer Ansicht, sind sie alle getrennt usw.? –

Antwort

0

Sie können unter dem oberen Ende der Bar mit

chartView.drawValueAboveBarEnabled = false 

und Einstellung etwas Farbe

barChartDataSet.valueTextColor = UIColor.someColor() 

aussehen wie diese Balkendiagramm Werte zeichnen: Image

0

mein Kommentar Siehe oben, aber so etwas wie dies funktionieren kann wenn Sie nicht auto Layout mit:

let labelA = UILabel() 
let labelB = UILabel() 

let padding: CGFloat = 5.0 // or whatever 

if CGRectIntersectsRect(labelA.frame, labelB.frame) { 
    // If the minY of labelA is <= labelB's that means labelA is ABOVE labelB 
    if labelA.frame.minY <= labelB.frame.minY { 
     // Set it above, with some (optional) padding 
     labelA.frame.origin.y = labelB.frame.origin.y - padding - labelA.frame.height 
    } else { 
     labelB.frame.origin.y = labelA.frame.origin.y - padding - labelB.frame.height 
    } 
} 

natürlich werden Sie zusätzlichen Code benötigen zur Überprüfung, ob sie zu hoch und anderen Grenzfälle sind.

+0

Sorry, ich hätte angeben sollen, dass dies mit dem Charts Framework (früher IOS-Charts) zusammenhängt. Ich habe meine Frage entsprechend aktualisiert und den zugehörigen Code zur Erstellung des Diagramms gepostet. – Flip

+0

Gotcha .. Sieht aus wie @keyv hat eine ziemlich gute Lösung! –

Verwandte Themen