Google Pie Chart часть фона

Question

Добрый день, каждый,

Возможно ли заполнить каждый кусок Google Piechart с помощью пользовательского изображения в качестве фона?

Я пока не нашел решение. Мне нужно это для лучшего представления инфографики.

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

Нет, вы не можете заполнить кусочки пирога изображениями.