Flot中的多个饼图

Question

有没有办法在flot中创建多个饼图而不单独创建每个饼图并为每个饼图创建一个div？

例如，我有以下数据：

• 年
• 销售
• 区域

每个馅饼应该涵盖不同的一年。在每个饼图中，每个切片将显示每个区域的销售额。

此外，是否有任何方法可以调整每个饼图的大小，相对而言，相对而言，销售额增加的一年将比销售额减少的年份显示更大的馅饼。

Answer 1

你的问题的答案是否定的，是的，是的：

1. 不，你需要每个图表div。
2. 是的，您可以在每个切片的顶部绝对放置另一个div /饼。
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）：