jquery - 显示标签时，防污甜甜圈图消失

我用弗洛特创建了一个简单的甜甜圈图。但是，如果使用默认设置，则不会显示标签（即使我指定了“ show：true”）。仅当我隐藏图例时，标签才会显示，但图表本身会消失。我是否缺少某些内容，或者这是flot库中的错误？

这是我的代码：

var data = [
  {label: "A", data: 373, color: "red"},
  {label: "B", data: 84, color: "blue"},
  {label: "C", data: 73, color: "green"}
];

$.plot("#chart", data, {
  series: {
    pie: {
      innerRadius: 0.75,
      show: true,
    }
  },
  label: {
    show: true,
  },
  legend: {
    show: false
  }
});

JsFiddle

最佳答案

查看饼图插件代码，图例可见性控制标签的可见性，如果pie.radius设置为auto（则默认值，如果未显式设置，默认值-适用代码如下）。

您碰巧选择了.75作为图表的innerRadius，在这种情况下，插件将其设置为半径。当radius和innerRadius相等时，将出现您所描述的消失现象。

// set labels.show
if (options.series.pie.label.show == "auto") {
    if (options.legend.show) {
        options.series.pie.label.show = false;
    } else {
        options.series.pie.label.show = true;
    }
}

// set radius
if (options.series.pie.radius == "auto") {
    if (options.series.pie.label.show) {
        options.series.pie.radius = 3/4;
    } else {
        options.series.pie.radius = 1;
    }
}

为什么用这种方式编写插件？我不确定-但您可以通过关闭图例时将innerRadius设置为.75以外的东西或指定innerRadius和radius属性来解决此问题：

$(function() {
  var data = [{
    label: "A",
    data: 373,
    color: "red"
  }, {
    label: "B",
    data: 84,
    color: "blue"
  }, {
    label: "C",
    data: 73,
    color: "green"
  }];

  $.plot("#chart", data, {
    series: {
      pie: {
        innerRadius: 0.5,
        radius: .75,
        show: true,
      }
    },
    label: {
      show: true,
    },
    legend: {
      show: false
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>

<div id="chart" style="width: 600px; height: 300px;"></div>