javascript - 谷歌饼图强制呈现饼外的 "minor"标签

Question

我已经对谷歌饼图和隐藏的切片标签进行了大量研究，但没有找到切片外的任何标签，所以我希望有另一种解决方案而不是 already suggested on SO .

我生成了很多不同的图表类型，为了更好的可读性，我自定义了饼图(doghnut)，以便它们在切片之外显示标签，并用线条连接。现在，正如在其他问题中看到的那样，如果没有空间或值太小，谷歌图表只会隐藏切片标签，这对我来说是 Not Acceptable ，为什么我想在应该有足够空间的地方展示它们。

即使将 sliceVisibilityThreshold 设置为 0，Google 图表仍然不喜欢“次要”数据值并且只是不显示它们的标签，还有其他解决方案吗考虑以下设置？ (你应该看到紫色切片的标签“Far”没有被渲染)

var chartData = {
    "options": {
      "legend": {
        "position": "none"
      },
      "pieHole": 0.5
    },
    "data": [
      [
        "Label 1",
        "Label 2"
      ],
      [
        "Foo",
        33059
      ],
      [
        "Bar",
        57893
      ],
      [
        "Baz",
        8135
      ],
      [
        "Boo",
        12211
      ],
      [
        "Far",
        3740
      ],
      [
        "Faz",
        7219
      ]
    ]
  },
  ctx = document.getElementById('canvas');

var onLoadGoogle = function() {
  var data = new google.visualization.arrayToDataTable(chartData.data);
  var chart = new google.visualization['PieChart'](ctx);
  var options = chartData.options;

  options.legend.position = 'labeled';
  options.pieSliceText = 'none';
  options.sliceVisibilityThreshold = 0;

  chart.draw(data, chartData.options);
}

window.google.load("visualization", "1.1", {
  packages: ["corechart"],
  callback: onLoadGoogle,
  nocss: true
});

#canvas {
  width: 600px;
  height: 300px;
}

<div id="canvas"></div>
<script src="https://www.google.com/jsapi"></script>

Answer 1

如 documentation for PieChart 中所述, pieStartAngle 选项可以帮助为一些标签腾出空间，但如果空间不足，则无能为力。这适用于切片内的默认标签和您正在使用的带标签的图例选项。

您还可以尝试使用 pieSliceTextStyle 和 legend.textStyle 将 fontSize 选项设置为较小的字体。