Flot 中的多个饼图

Question

有没有什么方法可以在 flot 中创建多个饼图而无需单独创建每个饼图并且每个饼图都有一个 div？

比如我有以下数据：

年
销售额
地区

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

另外，有什么方法可以调整每个饼图的大小，相对来说，销量多的年份会比销量少的年份显示更大的饼图。

Answer 1

您的问题的答案是否、是和是：

不，每个图表需要 div。
是的，您完全可以将另一个 div/pie 放在每个切片的顶部。
是的，您可以非常轻松地调整每个饼图的半径。

这是一个将项目 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）：

Flot 中的多个饼图

Multiple Pie Charts in Flot

flot