为iOS图表pieChart中的每个切片添加图像 [英] add an image for each slice in iOS-chart pieChart

问题描述

我正在使用 ios图表.我想创建一个饼图，如下图所示.我已经做了所有的骗局，但是在圆外的值旁边的圆中添加图像时遇到了问题.

I'm using ios-charts. I want to create a pie chart like below image. I have done all the confings, but I have problem with adding the image in the circle beside the values outside the circle.

有人可以帮助我如何在其中添加圆圈和图像吗?

Can anybody help me how to to add the circles and image inside it ?

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

UPDATED: note that the pie chart will scroll and those images should scroll with the related slices.

已更新: 我使用@Aditya Garg示例代码在标签位置旁边绘制图像，现在我的图表如下所示:

UPDATED: I used @Aditya Garg sample code to draw images beside the position of labels, and my chart is now looks like this :

我这样设置imageViewFrame:

I set the imageViewFrame like this:

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

已更新: Github Pull请求ios-chart repo swift

推荐答案

设置圆圈和内部图像很容易.首先创建一个UIImageView，更改拐角半径，然后将图像放入其中

Setting the circle and the image inside is easy. First create a UIImageView, change the corner radius, and put the image inside

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

您可以根据需要创建任意数量的

You can create as many of these as you need programmatically

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添加到该位置

The trickier part is drawing these images at the correct place (the circle image is always aligned with the middle of the pie chart section). You have to calculate the angle between these sections manually, and then add in the UImageView we created to this position

这些是pieChart向我们展示的几何属性

These are the geometric properties that pieChart exposes to us

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，以便代码正常工作.

Where absolute angles is an array of the slice angles. These always get bigger and end at 360 degrees. Note that we manually insert 0 at the beginning so that the code works nicely.

有一个bug，其中centerCircleBox不能返回真实的中心.要解决此问题，请使用此功能在pieChart 说的中心位置绘制图像，然后调整校正因子使其位于真实中心. (确保将一个较小的图像文件添加到您的项目中，我使用了红色的x标记)

There is a bug where centerCircleBox does not return the true center. To fix this use this function to draw an image on where the pieChart says its center is and then adjust the correction factor to get it in the true center. (make sure to add a smallish image file to your project, i used a red x mark)

   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越大，屏幕越向下，因此我们必须减去不加.

For the math, we simply have to keep track of our last absolute angle, our current absolute angle and find the angle in between. Add this onto our last value to find the true angle and then convert to X,Y coordinates. Note that the larger the Y gets, the more down the screen it goes, so we have to subtract not add.

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放在此处即可.参见下面的完整代码

Now, just iterate through the absoluteAngles array, calculate the position, and place the UIImageView here. See the full code below

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
}

让我知道您是否有任何疑问！

Let me know if you have any questions!

这篇关于为iOS图表pieChart中的每个切片添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！