FLOT饼图刃切断

我有表示与FLOT饼图以下代码：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倍。

来源

2015-10-19 Miles

'stroke.width'选项会导致截断边缘。将“半径”设置为49会使馅饼变小，固定切割边缘。 – mechenbier

继mechenbier的comment之后，您需要获得小于容器大小的馅饼大小，以便笔划仍保留在容器内。最简单的解决方案是设置半径24（它必须是较小的，则容器的高度/宽度的一半）：

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

见本更新fiddle。

来源

2015-10-20 08:45:15 Raidri

FLOT饼图刃切断

回答

相关问题