简体   繁体   中英

How to display all labels in Google Charts donut chart

I am using Google Charts (donut type) to display the data on our application. I noticed that when the label wouldnt fit on the pie slice, it wouldnt display. I've been checking the internet and their documentation but I could not find a way to manipulate the labels to wrap text or display all the time.
The label for the yellow slice below is not displayed.

在此处输入图片说明

It doesn't show the percentage label if the slice is less than 5% (this number varies depending on the size and width of your pi chart, but it's 5% in this example).

In the below graph, green is 5% and purple is 4.9%.

在此处输入图片说明

Here are some ideas for how to deal with this:

1) Add the following options to your options object. It will combine everything with less than 5% into one miscellaneous category that will be labeled.

sliceVisibilityThreshold: 0.05,
pieResidueSliceLabel: "Other",

在此处输入图片说明

2) Reduce the font-size. It still won't show labels it can't fit on, but it will show more labels because it'll be able to fit.

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

在此处输入图片说明

3) Enter the realm of desperate hackery and set a font-size in options that is tiny so they all render, then use CSS to make those labels large again. However, because they don't fit and because the spacing is all messed up, it'll look like garbage.

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

CSS

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

在此处输入图片说明

JSFiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM