如何创建带有圆形切片边缘的饼图？

Question

我想在我的iOS应用中实现如下效果（用Swift编写）

到目前为止，我已经能够使用Charts by danielgindi 实现这一目标。但我无法达到我想要的效果。有没有办法像这里的示例图像一样为每个饼图切片添加圆角？：

我的图表设置如下：

let data1 = PieChartDataEntry(value: 3)
let data2 = PieChartDataEntry(value: 5)
let data3 = PieChartDataEntry(value: 4)
let data4 = PieChartDataEntry(value: 6)
let data5 = PieChartDataEntry(value: 8)
let values = [data1, data2, data3, data4, data5]
let chartDataSet = PieChartDataSet(entries: values, label: nil)
let chartData = PieChartData(dataSet: chartDataSet)
let colors = [UIColor.fuelTintColor, UIColor.maintenanceTintColor, UIColor.insuranceTintColor, UIColor.fastagTintColor, UIColor.miscTintColor]
chartDataSet.colors = colors as! [NSUIColor]
chartDataSet.sliceSpace = 10
        
pieChart1.data = chartData
        
pieChart1.holeRadiusPercent = 0.8

我认为可以使用PieChartRenderer 来完成，但我不知道应该如何进行。

另外，如果您对其他实现方式有任何建议，请告诉我。

Answer 1

解决了，输出如下：

ring-chart-img

基本上我正在使用这个名为 CircularProgressView (https://cocoapods.org/pods/CircleProgressView) 的库来实现各个环。因为我需要 5 个环，所以我将 5 个这样的视图（背景清晰）堆叠在一起并旋转它们以达到我想要的效果。

Cocoapod 设置

首先，您必须在项目中安装 CircularProgressView pod。我在这里使用 Cocoapods 导入库。

注意：如果您尚未安装 Cocoapods，则需要先使用以下步骤安装 Cocoapods：https://guides.cocoapods.org/using/getting-started.html

要使用 Cocoapods 添加它，请在您的 Podfile 中添加以下行。

pod 'CircleProgressView'

然后在您的项目目录中的终端上运行pod install。

界面生成器

在您的 Storyboard 文件中，转到您的视图控制器并添加一个视图并设置其内容。您也可以通过编程方式创建此视图，但这里我将使用情节提要。

再创建 4 个视图并使用自动布局将它们堆叠在一起。

选择所有 5 个视图并转到 Identity Inspector（故事板中的右侧面板，顶部栏中的第 4 项）。

将Class 字段值（在自定义类下）设置为“CircularProgressView”。

将所有 5 个视图链接到您的 ViewController.swift 文件。

我将它们命名如下：

@IBOutlet weak var pieChart1: CircleProgressView!
@IBOutlet weak var pieChart2: CircleProgressView!
@IBOutlet weak var pieChart3: CircleProgressView!
@IBOutlet weak var pieChart4: CircleProgressView!
@IBOutlet weak var pieChart5: CircleProgressView!

在viewDidLoad() 中调用函数showRingChart() 来设置视图。

这里是函数的代码：

// Function to convert degrees to radian
func degToRad(_ rotationDegrees: Double) -> CGFloat {
    let rotationAngle = CGFloat(rotationDegrees * .pi/180.0)
    return rotationAngle
}

// Function to Show Ring Chart
func showRingChart() {
    
    // Values for the graph, can be changed as per your need
    let val1 = self.val1
    let val2 = self.val2
    let val3 = self.val3
    let val4 = self.val4
    let val5 = self.val5
    let totalVal = (val1 + val2 + val3 + val4 + val5)
    var spacing = 0.05 * totalVal // Spacing is set to 5% (ie. 0.05). Change it according to your needs
    
    print("Spacing: ", spacing)
    let totalSpacing = 5 * spacing //Total spacing value to be added in the chart
    
    let total = totalVal + totalSpacing //Total corresponding to 100% on the chart
    
    if val1 == 0.0
        && val2 == 0.0
        && val3 == 0.0
        && val4 == 0.0
        && val5 == 0.0 {
        
        // NO DATA, HIDE ALL CHARTS
        pieChart1.isHidden = true
        pieChart2.isHidden = true
        pieChart3.isHidden = true
        pieChart4.isHidden = true
        pieChart5.isHidden = true
        
    } else {

        // DATA AVAILABLE

        // Calculate Percentage of each value in the ring chart (ie. progress)
        let valOnePerc = (val1 / total) 
        let valTwoPerc = (val2 / total)
        let valThreePerc = (val3 / total)
        let valFourPerc = (val4 / total)
        let valFivePerc = (val5 / total)

        let spacingPerc = spacing / total
        
        // Angle offsets (in degrees)
        let offset1 = (valOnePerc + spacingPerc) * 360
        let offset2 = (valOnePerc + valTwoPerc + (2 * spacingPerc)) * 360
        let offset3 = (valOnePerc + valTwoPerc + valThreePerc + (3 * spacingPerc)) * 360
        let offset4 = (valOnePerc + valTwoPerc + valThreePerc + valFourPerc + (4 * spacingPerc)) * 360

        print("--- PRINTING CHART VALUES HERE ---- ")
        print(total)
        print(valOnePerc)
        print(valTwoPerc)
        print(valThreePerc)
        print(valFourPerc)
        print(valFivePerc)
        print(offset1)
        print(offset2)
        print(offset3)
        print(offset4)
        print("------------------")
        
        // Setup ring chart sections
        pieChart1.trackFillColor = UIColor.tintColorOne
        pieChart1.progress = valOnePerc
        
        pieChart2.trackFillColor = UIColor.tintColorTwo
        pieChart2.progress = valTwoPerc
        pieChart2.transform = CGAffineTransform(rotationAngle: degToRad(offset1))

        pieChart3.trackFillColor = UIColor.tintColorThree
        pieChart3.progress = valThreePerc
        pieChart3.transform = CGAffineTransform(rotationAngle: degToRad(offset2))

        pieChart4.trackFillColor = UIColor.tintColorFour
        pieChart4.progress = valFourPerc
        pieChart4.transform = CGAffineTransform(rotationAngle: degToRad(offset3))

        pieChart5.trackFillColor = UIColor.tintColorFive
        pieChart5.progress = valFivePerc
        pieChart5.transform = CGAffineTransform(rotationAngle: degToRad(offset4))
        
        // Unhide all charts
        pieChart1.isHidden = false
        pieChart2.isHidden = false
        pieChart3.isHidden = false
        pieChart4.isHidden = false
        pieChart5.isHidden = false

    }
}

它应该这样做。更改 (val1, val2, ..., val5) 值以更改环的进度。