javascript - 谷歌饼图块背景

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