raphael.js-将饼图转换为甜甜圈图 [英] raphael.js - converting pie graph to donut graph

问题描述

我正在尝试使用位于此处的raphael.js示例:

I'm trying to use a raphael.js example located here:

http://raphaeljs.com/pie.html

但是我想将饼图转换为甜甜圈图(所有切片的中间都有一个孔).当前，每个切片都使用以下代码创建:

but I want to convert the pie graph into a donut graph (have a hole in the middle of all the slices). Currently, each slice is being created with the following code:

function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }

我将如何修改它，以便从整个饼中删除固定半径的孔?我在这里看到了这篇文章，对您有所帮助，但是我无法完全确定将其应用于上面的代码的方式或位置:

How would I modify this so that a hole of a fixed radius was removed from the overall pie? I saw this post here, which helps, but I can't quite tell how or where to apply it to my code above:

如何在Raphael中使用路径实现甜甜圈洞"

推荐答案

一片馅饼的创建方式如下:

The way how one slice of the pie is created is like this:

1. 移动到圆心(cx，cy):"M"，cx，cy
2. 画一条线直到弧开始的边缘(x1，y1):"L"，x1，y1
3. 根据一些数学计算绘制圆弧:"A"，r，r，0，+(endAngle-startAngle> 180)，0，x2，y2
4. 在圆心的中间画一条线:在这种情况下，使用"z"；这意味着要移至原点(cx，cy)

1. move to the center of the circle (cx,cy): "M", cx, cy
2. draw a line until the edge, where the arc will start (x1,y1): "L", x1, y1
3. draw an arc based on some mathematical calculations: "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2
4. draw a line back to the middle of the circle: in this case "z" is used; it means move to origin(cx,cy)

并且切片(路径)已准备就绪.

and the slice(path) is ready.

为了创建甜甜圈，您需要修改路径的组成方式.您需要有一条由2条弧线(内部和外部)和2条直线组成的路径.

In order to create the donut you need to modify how the path is composed. You need to have a path composed of 2 arcs(inside and outside) and 2 lines to complete it.

因此，首先您需要根据位于甜甜圈中间(半径为 rin )的虚空圆的半径，找到路径的起​​点.让我们将此点的坐标称为xx1和yy1:

So first you need to find the starting point for the path, based on the radius of the imaginary empty circle that will be in the middle of the donut (with the radius rin). Lets call the coordinates of this point xx1 and yy1:

xx1 = cx + rin * Math.cos(-startAngle * rad)
yy1 = cy + rin * Math.sin(-startAngle * rad)

您从这一点开始构建路径("M"，xx1，yy1 )； http://jsfiddle.net/EuMQ5/425/

You start building the path from this point( "M", xx1, yy1 ); http://jsfiddle.net/EuMQ5/425/

下一步是将线绘制到圆的边缘("L"，x1，y1 ).从那里，您将不得不绘制外弧("A"，r，r，0，+(endAngle-startAngle> 180)，0，x2，y2 )，然后再画一条线到另一条线内弧的边缘("L"，xx2，yy2 ).要获取xx2和yy2的值，请执行以下操作:

Next step is to draw the line to the edge of the circle( "L", x1, y1 ). From there you will have to draw the outer arc( "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2 ) then one more line to the other edge of the inner arc( "L", xx2, yy2 ). To get the values for xx2 and yy2:

xx2 = cx + rin * Math.cos(-endAngle * rad)
yy2 = cy + rin * Math.sin(-endAngle * rad)  

最后一步是通过绘制内弧来完成路径("A"，rin，rin，0，+(endAngle-startAngle> 180)，1，xx1，yy1 ) .现在您有了一块甜甜圈.

and the last step is to complete the path by drawing the inner arc( "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1 ). And now you have a piece of a donut.

> 小提琴在这里.

**更新了小提琴链接

**updated fiddle link

这篇关于raphael.js-将饼图转换为甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！