Question

我正在使用谷歌图表。我创建了一个柱形图。在柱形图中，我想在每列中显示背景图像而不是背景颜色。是否有可能在谷歌图表？我怎样才能做到这一点？如果有任何想法，请与我分享。

我的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>

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是柱形图中的rect元素。您只需在第一次绘制图表后更改所有“饼图切片”的填充属性。

如何在背景中使用图片而不是谷歌图表中每列的颜色？

1 个答案: