2017-08-14 30 views
0

私は現在Charts - by Daniel Gindiを使用していて、彼のデモ以下、私はそうのような円グラフを実装しました:iOSチャート:PieChart内のパーセンテージで実際の値を表示していますか?

enter image description here

それは、次のコードを使用して達成した:

func createPieChart(dataPoints: [String: Double]) 
{ 
    for index in 0..<sortedDates.count 
    { 
     let year = sortedDates[index] 

     guard let costs = dataPoints[year] else { 
      return 
     } 

     let dataEntry = PieChartDataEntry(value: costs, label: year) 

     dataEntries.append(dataEntry) 
    } 

    chartDataSet = PieChartDataSet(values: dataEntries, label: "") 

    chartData = PieChartData(dataSet: chartDataSet) 

    chartDataSet.sliceSpace = 2.0 

    chartDataSet.yValuePosition = PieChartDataSet.ValuePosition.outsideSlice 

    ... 

    pieChartView.usePercentValuesEnabled = true 
    pieChartView.drawSlicesUnderHoleEnabled = false 
    pieChartView.holeRadiusPercent = 0.40 
    pieChartView.transparentCircleRadiusPercent = 0.43 
    pieChartView.drawHoleEnabled = true 
    pieChartView.rotationAngle = 0.0 
    pieChartView.rotationEnabled = true 
    pieChartView.highlightPerTapEnabled = false 

    let pieChartLegend = pieChartView.legend 
    pieChartLegend.horizontalAlignment = Legend.HorizontalAlignment.right 
    pieChartLegend.verticalAlignment = Legend.VerticalAlignment.top 
    pieChartLegend.orientation = Legend.Orientation.vertical 
    pieChartLegend.drawInside = false 
    pieChartLegend.yOffset = 10.0 

    pieChartView.legend.enabled = true 

    pieChartView.data = chartData 
} 

私は「何達成しようとしているのは、円のスライス内に実際のcostsの値を表示することですが、スライスの外側のパーセンテージも含めます。割合はchartDataSet.yValuePosition = PieChartDataSet.ValuePosition.outsideSliceを使用して示しています。その後

let valueText = formatter.stringForValue(
        value, 
        entry: e, 
        dataSetIndex: i, 
        viewPortHandler: viewPortHandler) 

それが描くifチェックを、使用して:コードの検査

は、私がPieChartRendererで、open override func drawValues(context: CGContext)機能し、その中で、コードがvalueTextに各円スライスの割合を計算がそこにあることに気づきました私の場合には外にあるスライス内部または外部の割合、:

else if drawYOutside 
{ 
    ChartUtils.drawText(
         context: context, 
         text: valueText, 
         point: CGPoint(x: 0, y: labelPoint.y + lineHeight/2.0), 
         align: align, 
         attributes: [NSFontAttributeName: valueFont, NSForegroundColorAttributeName: valueTextColor] 
         ) 
} 

しかし、私は実際に方法を見つけることができませんがcosts番目の値が含まれますatはPieChartDataEntry(value: costs, label: year)に渡されます。

私は円グラフをサブクラス化し、見つけたメソッドをオーバーライドするように言われましたが、その方法を正確には分かりません。例えば

dataPoints内の各インデックスにcostsの値は、ラベル2016のラベル201750.0ため100.0重複値です。関連する円のスライスにこれらの値を両方含めるとします。

このライブラリの経験があれば誰でも私を助けることができますか?

ありがとうございます!

+0

あなたがチャートまたは%値の隣の内側にあなたの価値を引き出す必要がありますか? –

+0

年が – Pangu

答えて

1

PieChartRendererから継承するクラスを作成し、そのように親クラスからdrawValuesを上書き:else if drawXInside以内

public class CustomClass: PieChartRenderer 
{ 
    override public func drawValues(context: CGContext) 
    { 
     // In this body, copy ALL code from parent class drawValues function 

     ... 
     let decimalFormatter = NumberFormatter() 
     decimalFormatter.minimumFractionDigits = 2 
     decimalFormatter.maximumFractionDigits = 2 
     decimalFormatter.positivePrefix = "$" 

     ... 

     for i in 0 ..< dataSets.count 
     { 
      ... 

      for j in 0 ..< dataSet.entryCount 
      { 
       ... 

       guard let e = dataSet.entryForIndex(j) else { continue } 
       let pe = e as? PieChartDataEntry 

       // e.y = the actual value in the costs array, not the percentage 
       let twoDecimalValue = NSDecimalNumber(value: e.y) 
       let totalCost = decimalFormatter.string(from: twoDecimalValue) 

       ... 

       if drawXInside || drawYInside 
       { 
        ... 

        if drawXInside && drawYInside 
        { 
         ... 
        } 
        else if drawXInside 
        { 
         if j < data.entryCount && pe?.label != nil 
         { 
          ChartUtils.drawText(
           context: context, 
           text: pe!.label!, 
           point: CGPoint(x: x, 
               y: y), 
           align: .center, 
           attributes: [NSFontAttributeName: yearValueFont, 
              NSForegroundColorAttributeName: yearTextColor ?? percentageTextColor] 
          ) 

          ChartUtils.drawText(
           context: context, 
           text: totalCost!, 
           point: CGPoint(x: x, 
               y: y + lineHeight), 
           align: .center, 
           attributes: [NSFontAttributeName: yearCostsValueFont, 
              NSForegroundColorAttributeName: yearCostsTextColor] 
          ) 
         } 
        } 
       } 
      } 
     } 
    } 
} 

、最初既存drawText機能は、私の場合には、label値を描画し、 。別のdrawTextファンクションを追加し、実際のの値を配列 `costsに表すtotalCostの値を渡します。

その後createPieChart関数内:

func createPieChart(dataPoints: [String: Double]) 
{ 
    ... 

    pieChartView.data = chartData 

    let customClass = CustomClass(chart: pieChartView, 
            animator: pieChartView.chartAnimator, 
            viewPortHandler: pieChartView.viewPortHandler) 
    pieChartView.renderer = customRenderer 
} 

結果:

enter image description here

+0

サンプルを提供することができますか?このグラフは@ Pangu –

+0

というサンプルを作成しました。答えは 'PieChartRendererから継承したクラスを作成し、次のように親クラスからのdrawValues: ' – Pangu

+0

私は試しましたがdidnotは私のために働いた@ Pangu –

-1

あなたは、その内部にデフォルトでinsideSlice

pieChartDataSet.yValuePosition = PieChartDataSet.ValuePosition.insideSlice 

yValuePositionプロパティを変更する必要がありますが、チャートの外に出そう側の上映として指定してください。

編集:コメントを1として

plsは円グラフ

の値がない割合
func setPieChartData(lables: [String]!, values:[Double]!) { 

     var valuesArray: [PieChartDataEntry] = [] 
     var colors: [UIColor] = [] 
     let valNSArray = values as NSArray 

     valNSArray.enumerateObjects({ object, index, stop in 
      //your code 
      colors.append(self.getRandomColor()) 


      valuesArray.append(PieChartDataEntry(value: object as! Double, label: lables[index])) 

     }) 

     let pieChartDataSet = PieChartDataSet(values: valuesArray, label: "Pie Data Chart") 
     pieChartDataSet.colors = colors 

     let piechartData = PieChartData(dataSets:[pieChartDataSet]) 
     pieChartDataSet.yValuePosition = PieChartDataSet.ValuePosition.insideSlice 
     self.data = piechartData 



} 

enter image description here

を示したコードの下にチェックし、これが役立つことを願っています。

+0

であるチャートの中に – Pangu

関連する問題