如何使用highchart在饼图上定位图像

Question

我正在使用 highcharts 在饼图上渲染图像，如下所示。

但是我无法正确定位它。

有什么好的公式可以做到这一点吗？

由于数据是动态变化的，我们如何给每个图像坐标。

我试过给出几个这样的公式。

 chart.customMen = chart.renderer.image('https://pixabay.com/static/uploads/photo/2014/04/02/10/56/restroom-304984_640.png', shapeM.x + shapeM.r / 4, shapeM.y,shapeM.r / 2, shapeM.r/4)

这是我想要的输出。

这是我的 fiddle http://jsfiddle.net/uq9kyon6/2/

我正在寻找可以应用于所有角度的公式。谁能帮帮我。

谢谢

Answer 1

终于解决了。

   var chart = this,
                points = chart.series[0].points,
                shape, r, ang, posX, posY,
                cX = chart.series[0].center[0],
                cY = chart.series[0].center[1] + chart.plotTop;

            chart.customImgs = [];

            $.each(points, function (i, p) {
                shape = p.shapeArgs;
                r = shape.r;
                ang = (shape.end - shape.start) / 2 + shape.start;
                posX = cX + (r * 0.8) * (Math.cos(ang));
                if((-.3) < Math.cos(ang) && Math.cos(ang) <.2){
                    var cal=.06;
                    posX = cX + (r * 0.7) * (Math.cos(ang) + cal)
                }
                var angle =(shape.end - shape.start)*360/Math.PI;
                posY = cY + (r * 0.7) * Math.sin(ang);
                var r1 = 2*(shape.end - shape.start)/Math.PI;
                r1= r1>1 ? 1 : r1;
                r= r*r1;
                if(angle>25)
                chart.customImgs.push(chart.renderer.image(
                    images[i],
                    posX + (p.labelPos[6] === 'right' ? (1) :(-1)) * (r / 8),
                    posY - r / 4, r / 4, r / 2)
                    .attr({
                    zIndex: 4,
                        'pointer-events': 'none'
                })
                    .add());
            });
        },
        redraw: function () {
            var chart = this,
                points = chart.series[0].points,
                shape, r, ang, posX, posY,
                cX = chart.series[0].center[0],
                cY = chart.series[0].center[1] + chart.plotTop;

            $.each(points, function (i, p) {
                shape = p.shapeArgs;
                r = shape.r;
                ang = (shape.end - shape.start) / 2 + shape.start;
                posX = cX + (r * 0.7) * Math.cos(ang);
                if((-.3) < Math.cos(ang) && Math.cos(ang) <.2){
                    var cal=.1;
                    posX = cX + (r * 0.7) * (Math.cos(ang) + cal)
                }
                posY = cY + (r * 0.7) * Math.sin(ang);

                if (chart.customImgs[i]) {
                    chart.customImgs[i].attr({
                        x: posX + (p.labelPos[6] === 'right' ? (1) : (-1)) * (r / 8),
                        y: posY - r / 4,

                    });
                }
            });
        }
    }
},

http://jsfiddle.net/w5o3ja8v/7/

如何使用highchart在饼图上定位图像

How to position images on piechart using highchart

math

highcharts

pie-chart

trigonometry