绘制饼图边缘切断

Question

我有以下代码显示带有Flot的饼图：

HTML

<div style="background-color: #000000">
    <div id="divChartContainer" style="width: 50px; height: 50px"></div>
</div>

JS：

$(function () {
    $.plot($('#divChartContainer'), [{data: 60, color: '#F0F0F0'},{data: 40, color: '#F68E22'}],  { 
        series: { 
            pie: { 
                show: true, 
                stroke: { width: 2, color: '#F0F0F0'},
                label:  { show: false },
                }, 
            legend: { show: false }
        }
    });
});

这也是fiddle。我不确定为什么顶部，底部，左边和右边被切断，因为我已经告诉图表高50px宽。

Answer 1

在mechenbier的comment之后，你需要让馅饼的大小小于容器的大小，以便笔划仍然留在容器内。最简单的解决方案是将半径设置为24（它需要小于容器高度/宽度的一半）：

pie: { 
    show: true, 
    stroke: { width: 2, color: '#F0F0F0'},
    label:  { show: false },
    startAngle: 3/2,
    radius: 24
}, 

请参阅此更新fiddle。