Javascript Canvas使用chart.js剪切饼图的边缘

与上图一样，

canvas

切掉饼图的边缘。我正在尝试调整画布的宽度和高度。当宽度较高时，底部将被切割，当高度较高时，侧面将被切割

下面是我在php for canvas中的代码：

            printf('<table>');
            echo '<tr><td style="text-align: right;"><canvas id="pie-canvas-'
                 . $canvasId
                 . '" width=256 height=256 style="width=300px;height=300px"></canvas></td><td style="text-align: left;width:360px;" id="legend" class="chart-legend"></td></tr>';

            echo '<script type="text/javascript">drawPie('
                . $canvasId
                . ', '
                . $data
                .', '
                . $legend
                . ');</script>';

printf（“”）；
回声'；
回音“drawPie（'
$canvasId
. ', '
.$数据
.', '
.$legend
. ');';

Javascript:

    printf( '<script type="text/javascript" src="django/static/js/Chart.min.js"></script>' );
    printf( '<script type="text/javascript" src="extlib/jquery-min.js"></script>' );
    printf( '<script type="text/javascript">' );
    ?>
    function drawPie( canvasId, data, legend )
    {
        var canvas = document.getElementById("pie-canvas-" + canvasId);
        var ctx = canvas.getContext("2d");
        var midX = canvas.width/2;
        var midY = canvas.height/2;
        var piedata = [];

        $.each(data,function(i,val){
            piedata.push({value:val.count,color:val.color,label:val.status});
        });

        var myPieChart = new Chart(ctx).Pie(piedata, {
            showTooltips: false,
            onAnimationProgress: drawSegmentValues
        });

        var radius = myPieChart.outerRadius;

        function drawSegmentValues()
        {
            var length = myPieChart.segments.length;
            var totalValue = 0;
            for (var i=0; i< length; i++)
            {
                totalValue +=myPieChart.segments[i].value;
            }
            for(var i=0; i< length; i++)
            {
                ctx.fillStyle="black";
                var textSize = canvas.width/15;
                ctx.font= textSize+"px Verdana";

                // Get needed variables
                var value = Math.round(((myPieChart.segments[i].value)/totalValue)*100);
                var startAngle = myPieChart.segments[i].startAngle;
                var endAngle = myPieChart.segments[i].endAngle;
                var middleAngle = startAngle + ((endAngle - startAngle)/2);

                // Compute text location
                var posX = (radius/1.5) * Math.cos(middleAngle) + midX;
                var posY = (radius/1.5) * Math.sin(middleAngle) + midY;

                // Text offside by middle
                var w_offset = ctx.measureText(value).width/2;
                var h_offset = textSize/4;

                ctx.fillText(value+"%", posX - w_offset, posY + h_offset);
            }
        }

        if(legend)document.getElementById("legend").innerHTML = myPieChart.generateLegend();
    }
    <?php
    printf('</script>');

printf（“”）；
printf（“”）；
printf（“”）；
?>
函数drawPie（画布ID、数据、图例）
{
var canvas=document.getElementById（“饼图画布-”+canvasId）；
var ctx=canvas.getContext（“2d”）；
var midX=canvas.width/2；
var midY=canvas.height/2；
var piedata=[]；
$。每个（数据、函数（i、val）{
push（{value:val.count，color:val.color，label:val.status}）；
});
var myPieChart=新图表（ctx）.Pie（piedata{
showTooltips:false，
onAnimationProgress:DrawSegmentValue
});
var半径=myPieChart.outerRadius；
函数值（）
{
变量长度=myPieChart.segments.length；
var totalValue=0；
对于（变量i=0；i你需要掷骰子的高度和宽度应该等于你的中间[X/Y]半径。这里可能存在舍入问题，因此如果您希望像素完美，可以使用像素数据。我已经给出了像素的宽度和高度。但仍然存在相同的问题。请详细说明您的答案。您可以从画布的中上像素（canvas.width/2,0）开始，循环Y+1，直到您看到当前像素不是灰色而是白色（外圆）你能举个例子吗？