Javascript 使用画布元素在鼠标上单击“分解切片”绘制圆环图_Javascript_Jquery_Html_Canvas

Javascript 使用画布元素在鼠标上单击“分解切片”绘制圆环图

javascript jquery html canvas

Javascript 使用画布元素在鼠标上单击“分解切片”绘制圆环图,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我需要你的帮助。我的要求是，需要绘制一个油炸圈饼图，带有explode（鼠标单击油炸圈饼中的特定切片）选项。我浏览了这个链接。但在这方面，他们使用了巨大的值来“线宽””并绘制dougnut切片。但是我想使用fillStyle填充每个切片，并使用线宽填充切片边框。所以我需要像画路径一样画每个切片。这样我就可以得到路径并在鼠标点击时分解每个切片。我使用了下面的代码。请任何人给我一个解决方案 <script> $(function(){ var canvas=do

我需要你的帮助。我的要求是，需要绘制一个油炸圈饼图，带有explode（鼠标单击油炸圈饼中的特定切片）选项。我浏览了这个链接。但在这方面，他们使用了巨大的值来“线宽””并绘制dougnut切片。但是我想使用fillStyle填充每个切片，并使用线宽填充切片边框。所以我需要像画路径一样画每个切片。这样我就可以得到路径并在鼠标点击时分解每个切片。我使用了下面的代码。请任何人给我一个解决方案

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        // define the donut
        var cX = Math.floor(canvas.width / 2);
        var cY = Math.floor(canvas.height / 2);
        var radius = Math.min(cX,cY)*.75;

        // the datapoints
        var data=[];
        data.push(67.34);
        data.push(28.60);
        data.push(1.78);
        data.push(.84);
        data.push(.74);
        data.push(.70);

        // colors to use for each datapoint
        var colors=[];
        colors.push("teal");
        colors.push("rgb(165,42,42)");
        colors.push("purple");
        colors.push("green");
        colors.push("cyan");
        colors.push("gold");

        // track the accumulated arcs drawn so far
        var totalArc=0;

        // draw a wedge
        function drawWedge2(percent, color) {
            // calc size of our wedge in radians
            var WedgeInRadians=percent/100*360 *Math.PI/180;
            // draw the wedge
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(cX, cY);
            ctx.arc(cX, cY, radius, totalArc, totalArc+WedgeInRadians, false);
            ctx.closePath();
            ctx.fillStyle = color;
            ctx.fill();
            ctx.restore();
            // sum the size of all wedges so far
            // We will begin our next wedge at this sum
            totalArc+=WedgeInRadians;
        }

        // draw the donut one wedge at a time
        function drawDonut(){
            for(var i=0;i<data.length;i++){
                drawWedge2(data[i],colors[i]);
            }
            //Don't want to draw Arch inner the pie. It causes problem on explode slice
            //cut out an inner-circle == donut
            //ctx.beginPath();
            //ctx.moveTo(cX,cY); 
            //ctx.fillStyle="white";
            //ctx.arc(cX, cY, radius*.50, 0, 2 * Math.PI, false);
            //ctx.fill(); 
        }

        // draw the background gradient
        var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop(0, "#008B8B");
        gradient.addColorStop(0.75, "#F5DEB3");

        // draw the donut
        drawDonut();

    }); // end $(function(){});
    </script>

    </head>

    <body>
        <canvas id="canvas" width=800 height=500></canvas>
    </body>


$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//定义甜甜圈
var cX=数学地板（canvas.width/2）；
var cY=数学地板（画布高度/2）；
变量半径=数学最小值（cX，cY）*.75；
//数据点
var数据=[]；
数据推送（67.34）；
数据推送（28.60）；
数据推送（1.78）；
数据推送（.84）；
数据推送（.74）；
数据推送（.70）；
//用于每个数据点的颜色
var颜色=[]；
颜色。推（“青色”）；
颜色。推送（“rgb（165,42,42）”；
颜色。推（“紫色”）；
颜色。推送（“绿色”）；
颜色。推送（“青色”）；
颜色。推送（“金色”）；
//跟踪到目前为止绘制的累积弧
var totalArc=0；
//挖楔子
函数drawWedge2（百分比、颜色）{
//楔形物的计算尺寸（弧度）
var WedgeInRadians=百分比/100*360*Math.PI/180；
//拔掉楔子
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（cX，cY）；
ctx.弧（cX，cY，半径，总弧，总弧+楔形半径，假）；
ctx.closePath（）；
ctx.fillStyle=颜色；
ctx.fill（）；
ctx.restore（）；
//求和到目前为止所有楔块的大小
//我们将从这个总数开始下一个楔子
总弧度+=楔形弧度；
}
//一次画一个楔子
函数drawDonut（）{
对于（var i=0；iexplode意味着在单击该切片时，您希望将其删除或显示为更大的片段。我需要在鼠标单击时像这样进行分解。这与作者希望的不完全一样，但仍然是一种分解效果：