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餅圖刃切斷

回答

相關問題