Множество диаграмм пирога в флоте

Question

Есть ли способ создать несколько круговых диаграмм на флоте, не создавая каждый отдельно и имея div для каждого из них?

Например, у меня есть следующие данные:

• Год
• продаж
• Регион

Каждый пирог должен охватывать другой год. В каждом пироге каждый фрагмент будет показывать продажи для каждого региона.

Кроме того, есть ли способ отрегулировать размер каждой круговой диаграммы, чтобы относительно год с большим количеством продаж показывал более крупный пирог, чем год с меньшим количеством продаж.

Answer 1

Ответы на вопросы нет, да и да:

1. Нет, вам нужно DIV за диаграмму.
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):