如何在 Google 图表圆环图中显示所有标签
How to display all labels in Google Charts donut chart
我正在使用 Google 图表(甜甜圈类型)在我们的应用程序上显示数据。我注意到当标签不适合饼图切片时,它不会显示。我一直在查看互联网和他们的文档,但我找不到一种方法来操纵标签来换行文本或一直显示。
下方黄色切片的标签未显示。
如果切片小于 5%,则不显示百分比标签(此数字因圆周率图的大小和宽度而异,但在本例中为 5%)。
在下图中,绿色为 5%,紫色为 4.9%。
这里有一些关于如何处理这个问题的想法:
1) 将以下选项添加到您的 options
对象。它会将低于 5% 的所有内容合并到一个将被标记的杂类中。
sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",
2) 减小字体大小。它仍然不会显示它不适合的标签,但它会显示更多标签,因为它能够适合。
pieSliceTextStyle: {
color: 'black',
fontSize:11
},
3) 进入绝望的 hackery 领域并在 options
中设置一个很小的字体大小以便它们全部呈现,然后使用 CSS使这些标签再次变大。但是,因为它们不合适,而且因为间距乱七八糟,所以看起来像垃圾。
pieSliceTextStyle: {
color: 'black',
fontSize:0.5
},
CSS
svg g text{
font-size:11px !important;
}
我正在使用 Google 图表(甜甜圈类型)在我们的应用程序上显示数据。我注意到当标签不适合饼图切片时,它不会显示。我一直在查看互联网和他们的文档,但我找不到一种方法来操纵标签来换行文本或一直显示。
下方黄色切片的标签未显示。
如果切片小于 5%,则不显示百分比标签(此数字因圆周率图的大小和宽度而异,但在本例中为 5%)。
在下图中,绿色为 5%,紫色为 4.9%。
这里有一些关于如何处理这个问题的想法:
1) 将以下选项添加到您的 options
对象。它会将低于 5% 的所有内容合并到一个将被标记的杂类中。
sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",
2) 减小字体大小。它仍然不会显示它不适合的标签,但它会显示更多标签,因为它能够适合。
pieSliceTextStyle: {
color: 'black',
fontSize:11
},
3) 进入绝望的 hackery 领域并在 options
中设置一个很小的字体大小以便它们全部呈现,然后使用 CSS使这些标签再次变大。但是,因为它们不合适,而且因为间距乱七八糟,所以看起来像垃圾。
pieSliceTextStyle: {
color: 'black',
fontSize:0.5
},
CSS
svg g text{
font-size:11px !important;
}