谷歌饼图中的自定义切片答案

【问题标题】：Custom slice in google pie chart谷歌饼图中的自定义切片
【发布时间】：2019-09-02 10:11:24
【问题描述】：

我使用谷歌饼图创建了一个饼图。我想在每个切片内显示图标，但是当我将切片悬停时，它会将切片更新为上一个 html，并且图标消失了。

    google.visualization.events.addListener(chart, "ready", function() {
        var layout = chart.getChartLayoutInterface();
        var boundsChart = layout.getChartAreaBoundingBox();
        var labels = container.getElementsByTagName("text");
        var g = container.getElementsByTagName("g");


        Array.prototype.forEach.call(labels, function(label, index) {
          // console.log(label, index);

          if (label.getAttribute("fill") === "none") {
            var bounds = label.getBBox();
            var group = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "g"
            );

            var img = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "image"
            );
            img.setAttribute("x", "-17");
            img.setAttribute("y", "-17");
            img.setAttribute("width", "34");
            img.setAttribute("height", "34");
            img.setAttributeNS(
              "http://www.w3.org/1999/xlink",
              "href",
              "http://findicons.com/files/icons/512/star_wars/32/clone_old.png"
            );

            var translate = "translate(" + bounds.x + "," + bounds.y + ")";
            group.setAttribute(
              "transform",
              translate

            );
            group.appendChild(img);

            label.parentNode.appendChild(group);

          }
        });
      });
      google.visualization.events.addListener(chart, "click", changetext);
      chart.draw(data, options);
      function changetext(e) {
        var selectedItem = chart.getSelection();
      }
    });

https://jsfiddle.net/ok1a82bf/

【问题讨论】：

标签： pie-chart

【解决方案1】：

它似乎与设置属性一起工作

enableInteractivity: false

【讨论】：