为 iOS-chart pieChart 中的每个切片添加图像

Question

我正在使用 ios-charts。我想创建一个如下图所示的饼图。我已经完成了所有的配置，但是我在将图像添加到圆圈外的值旁边时遇到了问题。

谁能帮我如何在其中添加圆圈和图像？

已更新：请注意，饼图将滚动，并且这些图像应与相关切片一起滚动。

已更新：我使用@Aditya Garg 示例代码在标签位置旁边绘制图像，我的图表现在看起来像这样：

我这样设置 imageViewFrame：

imageView.frame = CGRect(x: xPos-10, y: yPos+10, width: 20, height: 20)

已更新： Github Pull request for ios-chart repo swift

Answer 1

设置圆圈和里面的图片很容易。先创建一个UIImageView，改变圆角半径，把图片放在里面

//Assuming you have declared a UIImageView and an image
imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.clipsToBounds = true
imageView.image = image

您可以根据需要以编程方式创建任意数量的这些

func drawCircle(xPos:CGFloat, yPos:CGFloat, name: String){ 
    let image = UIImage(named: name)
    let imageView = UIImageView(image: image!)
    imageView.frame = CGRect(x: xPos-10, y: yPos+10, width: (image?.size.width)!, height: (image?.size.height)!)
    imageView.layer.cornerRadius = imageView.frame.size.width/2
    imageView.clipsToBounds = true
    imageView.tag = 1000 //this is so we can later remove and redraw the circle in a new position
    pieChart.addSubview(imageView)
}

更棘手的部分是在正确的位置绘制这些图像（圆形图像始终与饼图部分的中间对齐）。你必须手动计算这些部分之间的角度，然后将我们创建的 UImageView 添加到这个位置

这些是 pieChart 向我们公开的几何属性

let FDEG2RAD = CGFloat(M_PI / 180.0)
var absoluteAngles : [CGFloat] = pieChart.absoluteAngles
absoluteAngles.insert(0, at: 0)
var center = pieChart.centerCircleBox
center.x = center.x - 15 //correction factor for center, adjust these as you see fit
center.y = center.y - 11
let r: CGFloat = pieChart.radius + 30 //distance from center

其中绝对角度是切片角度的数组。这些总是变大并以 360 度结束。请注意，我们在开头手动插入 0，以便代码运行良好。

有一个错误，其中 centerCircleBox 不是 return 真正的中心。要解决此问题，请使用此功能在饼图表示的中心所在的位置绘制图像，然后调整校正因子以使其位于真正的中心。（确保在您的项目中添加一个较小的图像文件，我使用了红色的 x 标记）

   func drawCenterX(xPos:CGFloat, yPos:CGFloat){
   let xred = "xmarks.png"
   let image = UIImage(named: xred)
   let imageView = UIImageView(image: image!)
   imageView.frame = CGRect(x: xPos, y: yPos, width: (image?.size.width)!, height: (image?.size.height)!)
   pieChart.addSubview(imageView)
}

对于数学，我们只需跟踪上一个绝对角度、当前绝对角度并找到两者之间的角度。将其添加到我们的最后一个值以找到真正的角度，然后转换为 X、Y 坐标。请注意，Y 越大，它越往屏幕下方移动，因此我们必须减去而不是加。

let x = center.x + (r * sin((absoluteAngles[last] + ((absoluteAngles[current] - absoluteAngles[last] )/2)) * FDEG2RAD))
let y = center.y - (r * cos((absoluteAngles[last] + ((absoluteAngles[current] - absoluteAngles[last] )/2)) * FDEG2RAD))

现在，只需遍历absoluteAngles 数组，计算位置，然后将UIImageView 放在这里。请参阅下面的完整代码

func setLabels(vals : [Int]){

    let subViews = self.pieChart.subviews //this removes the previous UIImageViews
    for subview in subViews{
        if subview.tag == 1000 {
            subview.removeFromSuperview()
        }
    }

    let FDEG2RAD = CGFloat(M_PI / 180.0)
    var absoluteAngles : [CGFloat] = pieChart.absoluteAngles
    absoluteAngles.insert(0, at: 0)
    var center = pieChart.centerCircleBox
    center.x = center.x - 15 //correction factor for center, adjust these as you see fit
    center.y = center.y - 11
    let r: CGFloat = pieChart.radius + 30 //distance from center
    var current = 1
    var last = 0

    for value in vals{


        let x = center.x + (r * sin((absoluteAngles[last] + ((absoluteAngles[current] - absoluteAngles[last] )/2)) * FDEG2RAD))
        let y = center.y - (r * cos((absoluteAngles[last] + ((absoluteAngles[current] - absoluteAngles[last] )/2)) * FDEG2RAD)) 

        last = current
        current = current + 1

        UIView.animate(withDuration: 1.0, delay: 0, options: .curveEaseOut, animations: { //Adds a nice animation that brings the circle in from off screen
            //Implement your own logic for how you want to pass in the name of the section to the function we defined above.
            self.drawCircle(xPos: x, yPos: y, name: name)
            }, completion: nil)
    }
    drawCenterX(xPos: center.x, yPos: center.y)//visually locate center
}

如果您有任何问题，请告诉我！

为 iOS-chart pieChart 中的每个切片添加图像

add an image for each slice in iOS-chart pieChart

ios

pie-chart

swift

ios-charts