Google 원형 차트 배경

Question

안녕하세요 여러분,

Google piechart의 각 조각을 배경으로 맞춤 이미지로 채울 수 있습니까?

아직 해결책을 찾지 못했습니다. 더 나은 infographics 프레 젠 테이션을 위해 그것을 필요합니다.

Answer 1

svg 패턴을 통해 이미지를 생성하고 def에 추가 한 다음 채우기 속성을 사용하여 이미지를 채 웁니다. 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)"); 
     }} 

직사각형은 기둥 형 차트 안에있는 rect 요소입니다. 차트를 처음 그리면 모든 "파이 조각"에 대한 채우기 특성 만 변경하면됩니다.

Answer 2

아니요, 조각으로 이미지를 채울 수 없습니다.