如何在谷歌饼图pieHole中添加一些文本 [英] How to add some text in google piechart pieHole

问题描述

pieHole ，我只想在 pieHole内部提供一些自定义文本，这可能吗？任何想法如何去做他的？
我的代码是

  var chart6 = new google.visualization.PieChart（document.getElementById（'chart6'）） ; 
 chart6.draw（data，{width：650，height：259，title：'浏览器跳出率'，
颜色：['＃058DC7'，'＃50B432'，'＃ED561B'，' ＃EDEF00'，'＃24CBE5'，'＃64E572']，
 areaOpacity：0.1，
 pieHole：0.4，
 hAxis：{textPosition：'in'，showTextEvery：5，slantedText： false，textStyle：{color：'#FFFFFF'，fontSize：10}}，
 pointSize：5，
 chartArea：{left：0，top：30，width：100％，height： 100％} 
}）; 
  

解决方案

没有图表选项可让您放置文本在孔里;您必须将其他元素放在图表顶部。

如果您不必担心较旧版本的IE，可以将图层下的HTML而不是顶部，并将图表的 backgroundColor 选项设置为透明。这样可以让文字通过孔显示，但不会阻止任何鼠标与图表的交互。如果你必须为IE< 9也必须顶层（至少在IE< 9中），因为可视化API不支持IE< 9。

visualization.PieChartwithpieHole, I just want to give some custom text insidepieHole` is this possible? Any idea how to do his? My code is

                 var chart6 = new google.visualization.PieChart(document.getElementById('chart6'));
                chart6.draw(data, {width: 650, height: 259, title: 'Browser bounce rate',
                    colors:['#058DC7','#50B432','#ED561B','#EDEF00','#24CBE5','#64E572'],
                    areaOpacity: 0.1,
                    pieHole: 0.4,
                    hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#FFFFFF', fontSize: 10 } },
                    pointSize: 5,
                    chartArea:{left:0,top:30,width:"100%",height:"100%"}
                });

解决方案

There are no chart options that will let you put text in the hole; you have to layer other elements on top of your chart.

If you don't have to worry about older versions of IE, you can actually layer the HTML under the chart instead of on top, and set the chart's backgroundColor option to "transparent". This will let the text show through the hole, but won't block any mouse interactions with the chart. If you have to code for IE < 9 as well, you have to layer on top (at least in IE < 9), as the Visualization API does not support transparency in IE < 9.

这篇关于如何在谷歌饼图pieHole中添加一些文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！