显示标签时，Flot 圆环图消失

Question

我用 flot 创建了一个简单的圆环图。但是，如果我使用默认设置，则不会显示标签（即使我指定 "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

Answer 1

查看饼图插件代码，图例可见性控制标签可见性，如果 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>

显示标签时，Flot 圆环图消失

Flot donut chart disappears when labels are shown

jquery

flot

pie-chart

donut-chart