如何在 Google Charts 圆环图中显示所有标签

JAD*_*ADE 2 javascript data-visualization google-visualization

我正在使用 Google Charts(甜甜圈类型)在我们的应用程序上显示数据。我注意到当标签不适合馅饼切片时,它不会显示。我一直在检查互联网和他们的文档,但我找不到一种方法来操纵标签来包装文本或一直显示。
不显示下面黄色切片的标签。

在此处输入图片说明

Cha*_*ton 5

如果切片小于 5%,则不会显示百分比标签(此数字因 pi 图的大小和宽度而异,但在本例中为 5%)。

在下图中,绿色为 5%,紫色为 4.9%。

在此处输入图片说明

以下是有关如何处理此问题的一些想法:

1)将以下选项添加到您的options对象中。它将把小于 5% 的所有内容合并到一个杂项类别中,并将被标记。

sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

2)减小字体大小。它仍然不会显示它不能适应的标签,但它会显示更多的标签,因为它能够适应。

pieSliceTextStyle: {
      color: 'black',
      fontSize:11
},
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

3)进入绝望的黑客领域并设置一个options很小的字体大小,以便它们全部呈现,然后使用 CSS 再次使这些标签变大。但是,因为它们不适合并且因为间距都搞砸了,所以它看起来像垃圾。

pieSliceTextStyle: {
     color: 'black',
     fontSize:0.5
},
Run Code Online (Sandbox Code Playgroud)

CSS

svg g text{
    font-size:11px !important;
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

JSFiddle