Flot 中的多个饼图

Question

有没有什么方法可以在 flot 中创建多个饼图，而无需单独创建每个饼图并为每个饼图设置一个 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）：