Flot中的多個餅圖

Question

有沒有什麼辦法可以在flot中創建多個餅圖而不需要單獨創建每個餅圖並且每個餅圖都有一個div？

例如，我有以下數據：

• 年
• 銷售
• 地區

每個餡餅應涵蓋不同的年份。在每個餅圖中，每個切片將顯示每個區域的銷售情況。

此外，是否有任何方法來調整每個餅圖的大小，相對而言，銷售額較高的一年將顯示比銷售較少的一年更大的餅圖。

Answer 1

你的問題的答案是否定的，是的是：

1. 沒有，你需要每圖表覈實。
2. 是的，你可以絕對在每個切片頂部放置另一個div/pie。
3. 是的，你可以很容易地調整每個餅圖的半徑。

下面是一個例子放在一起項的1和2：

標記：

<div id="master" style="width: 500px; height: 500px;"></div> 
<div id="slice1" style="width: 100px; height: 100px; background-color: transparent"></div> 
<div id="slice2" style="width: 100px; height: 100px; background-color: transparent"></div> 
<div id="slice3" style="width: 100px; height: 100px; background-color: transparent"></div> 
<div id="slice4" style="width: 100px; height: 100px; background-color: transparent"></div> 

JS：

var data = [ 
    { label: "Series1", data: 90}, 
    { label: "Series2", data: 50}, 
    { label: "Series3", data: 70}, 
    { label: "Series4", data: 70} 
]; 

function otherData(){ 
    var rV = []; 
    for (var i = 0; i < 4; i++){ 
    rV.push({label:"Series" + (i+1), data: Math.random() * 10}); 
    } 
    return rV; 
} 

var chartCenter = [$('#master').width()/2, $('#master').height()/2]; 
var masterRadius = 200; 
var sliceRadius = 40; 

var chart1 = $.plot($('#master'), data, { 
    series: { 
     pie: { 
      show: true, 
      radius: masterRadius 
     }, 
    }, 
    legend: { 
    show: false 
    } 
}); 

var masterData = chart1.getData(); 
for (var i = 0; i < masterData.length; i++){ 
    var dataPoint = masterData[i]; 
    var angle = dataPoint.startAngle + dataPoint.angle/2; 
    var sliceCenter = [Math.cos(angle) * masterRadius/2, 
        Math.sin(angle) * masterRadius/2]; 
    var sliceDiv = $('#slice' + (i + 1)); 
    sliceDiv.css({"position": "absolute", "left": sliceCenter[0] + chartCenter[0] - sliceRadius, "top": sliceCenter[1] + chartCenter[1] - sliceRadius}); 
    $.plot(sliceDiv, otherData(), { 
    series: { 
     pie: { 
      show: true, 
      radius: sliceRadius, 
     label: { 
      show: false 
     } 
     } 
    }, 
    legend: { 
     show: false 
    } 
    }); 
} 

可生產（例如here）：