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

时间:2015-11-04 11:17:08

标签: javascript google-visualization data-visualization

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

enter image description here

1 个答案:

答案 0 :(得分:4)

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

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

enter image description here

以下是如何解决这个问题的一些想法:

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

sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",

enter image description here

2)减少字体大小。它仍然不会显示它无法容纳的标签,但它会显示更多标签,因为它能够适合。

pieSliceTextStyle: {
      color: 'black',
      fontSize:11
},

enter image description here

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

pieSliceTextStyle: {
     color: 'black',
     fontSize:0.5
},

CSS

svg g text{
    font-size:11px !important;
}

enter image description here

JSFiddle