Question

我需要你的帮助。我的要求是，需要绘制爆炸的 donutchart （在鼠标点击时爆炸甜甜圈中的特定切片）选项。我通过这个链接。 http://jsfiddle.net/RgLAU/1/。但在这方面，他们正在使用巨大的价值＆＃34; lineWidth ＆＃34;并绘制dougnut切片。但是我希望使用 fillStyle 来填充每个切片，并使用 lineWidth 来切片 border 。所以我需要像路径一样绘制每个切片。这样我就可以获得路径并在鼠标点击时爆炸每个切片。我使用以下代码。请任何人给我解决方案。

<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>

谢谢， Bharathi

使用Canvas元素在mousel点击时使用爆炸切片绘制圆环图

0 个答案: