谷歌餅圖片背景

Question

美好的一天每個人，

是否有可能填充每一塊谷歌餅圖與自定義圖像爲背景？

我還沒有找到任何解決方案。我需要它來更好地展示圖表。

Answer 1

通過svg模式創建圖像，將其附加到def並通過fill屬性填充。 enableInteractivity必須設置爲false。

window.google.visualization.events.addListener(chart, 'ready', function() { 

     var rectan = $('g g:first-of-type g:nth-of-type(2) rect'); 
     var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern'); 

     patt.setAttribute('id', 'img1'); 
     patt.setAttribute('patternUnits', 'userSpaceOnUse'); 
     patt.setAttribute('width', '20'); 
     patt.setAttribute('height', '287'); 




     var image = document.createElementNS('http://www.w3.org/2000/svg', 'image'); 
     image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '../Images/bar.png'); 
     image.setAttribute('x', '0'); 
     image.setAttribute('y', '0'); 
     image.setAttribute('width', '20'); 
     image.setAttribute('height', '287'); 

     var defs = document.getElementsByTagName('defs')[0]; 

     patt.appendChild(image); 
     defs.appendChild(patt); 
     for (var i = 0; i < rectan.length; i++) { 
      rectan[i].setAttribute("fill", "url(#img1)"); 
     }} 

rectan是列圖中的矩形元素。您只需在第一次繪製圖表後更改所有「餅圖切片」的填充屬性。

Answer 2

不，你不能用圖像填充餅圖片。