Question

大家好日子，

是否可以使用自定义图像作为背景填充每个谷歌饼图？

我还没有找到任何解决方案。我需要它来进行更好的信息图表展示。

Answer 1

不，你不能用图片填充饼图片。

Answer 2

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

谷歌饼图片背景

2 个答案: