Flot 饼图边缘被切掉

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这里。我不确定为什么顶部、底部、左侧和右侧边缘被切断，因为我告诉图表是 50 像素高和宽。

Answer 1

继 mechenbier 的之后，您需要使馅饼的大小小于容器的大小，以便笔划仍留在容器内。最简单的解决方案是将半径设置为 24（它需要小于容器 height/width 的一半）：

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

查看此更新 fiddle。

Flot 饼图边缘被切掉

Flot pie chart edges cut off

flot