Как использовать изображение в фоновом режиме вместо цвета для каждого столбца в диаграмме Google?

Я использую диаграмму Google. Я создал диаграмму столбцов. В столбце диаграммы я хочу показать фоновое изображение вместо цвета фона в каждом столбце. Возможно ли это в диаграмме Google? Как я могу это сделать? Пожалуйста, поделитесь со мной, если у кого-нибудь есть идея.Как использовать изображение в фоновом режиме вместо цвета для каждого столбца в диаграмме Google?

Мой jsfiddle здесь: http://jsfiddle.net/8fks1edf/

В изображении, я пометил, где я хочу изменений.

enter image description here

Мои коды:

<div id="e_mcf" style="height: 400px; width: 600px;"></div> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
function drawChart() { 
var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn('string', 'ABCD'); 
dataTable.addColumn('number', 'Percentage'); 
dataTable.addColumn({type: 'string', role: 'annotation'}); 
dataTable.addColumn({type: 'string', role: 'style'}); 


dataTable.addRows([ 
['AB', 61, '61%','#FF8B00'], 

['CD', 90,'90%', '#FF2D00'], 

['EF', 70,'70%','#0C8E86'], 

['GH', 85,'85%','#0779CF'], 

['IJ', 70,'70%','#27486B'] 
    ]); 

var options = { 

vAxis: {gridlines: {color: 'transparent', count: 0}, minValue: 0}, 

legend: 'none', 
backgroundColor: { fill:'transparent' }, 
isStacked: true, 
annotations: { 
     textStyle: { 
     fontName: 'Lucida Fax', 
     fontSize: 10, 
     bold: true, 
     color: '#fff', 
     auraColor: 'transparent', 

    } 
    } 
    }; 
var chart = new google.visualization.ColumnChart(document.getElementById('e_mcf')); 
chart.draw(dataTable, options); 
    } 


    </script>

источник

2014-12-20 Priyank Dey

Вы сделали это? Твои сомнения такие же, как у меня. Я сделал свое наложение, не заменяя «заполнение» http://stackoverflow.com/questions/29975138/how-can-i-get-pngbase64-with-images-inside-of-svg-in-google-charts – fsi

Создание изображения с помощью SVG рисунка, добавив его к опр и заполнение с ним с помощью атрибута заполнения. 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 - это прямоугольный элемент внутри диаграммы столбцов. Вам просто нужно изменить атрибут заполнения для всех «кусочков пирога» после первого рисования диаграммы.

источник

2015-01-07 15:30:37

может добавьте js скрипку? вот моя ссылка jsfiddle. http://jsfiddle.net/8fks1edf/ –

Как использовать изображение в фоновом режиме вместо цвета для каждого столбца в диаграмме Google?

ответ

Смежные вопросы