Google饼图中的中心图像

时间:2019-09-03 10:58:45

标签: javascript svg pie-chart

我制作了一个饼图,每个切片内都有图标。我想弄清楚如何正确地将它们居中?

图标将插入图像元素中。也许这是错误的方法

  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/t893ec52/

0 个答案:

没有答案