谷歌饼图强制渲染“;次要的“;馅饼外的标签

Google pie chart force rendering of "minor" labels outside the pie

本文关键字：标签 谷歌      更新时间：2023-09-26

我已经研究了很多关于谷歌饼图和隐藏切片标签的内容，但没有发现切片外的标签，所以我希望有另一个解决方案，而不是在so.上建议的

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

尽管如此，谷歌图表不喜欢"次要"数据值，只是不显示它们的标签，即使sliceVisibilityThreshold设置为0，还有其他解决方案可以考虑以下设置吗？（你应该看到紫色切片的标签"远"没有被渲染）

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>

如PieChart文档中所述，pieStartAngle选项可以帮助为一些标签腾出空间，但如果空间不足，则无法执行任何操作。这适用于切片内的默认标签和您正在使用的已标记图例选项。

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

相关文章：