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

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 在您的项目目录中的终端上。

界面生成器

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

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

Select 所有 5 个视图并转到身份检查器（情节提要中的右侧面板，顶部栏中的第 4 项）。

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

Link 您的 ViewController.swift 文件的全部 5 次查看。

我给它们命名如下：

@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) 值以更改环的进度。

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

How can I create a Pie Chart with rounded slice edges?

charts

core-graphics

ios

pie-chart

swift

Cocoapod 设置

界面生成器