javascript - Google 饼图 - 图像作为标签

Question

我正在使用像这样的常规 Google 饼图:

      google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     500],
      ['Eat',      500],
      ['Commute',  800],
      ['Watch TV', 500],
      ['Sleep',    200],
      ['Sleep',    500]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

但我想在每个标签上放一张图片。是否可以？为了更好地解释我正在搜索的内容，我添加了一张图片:

Answer 1

你可以使用标签的位置 --> label.getBBox()
将图像放在图表上，
在图表的 'ready' 事件上...

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     500],
    ['Eat',      500],
    ['Commute',  800],
    ['Watch TV', 500],
    ['Sleep',    200],
    ['Sleep',    500]
  ]);

  var options = {
    title: 'My Daily Activities',
    legend: {
      maxLines: 2,
      position: 'top'
    },
    height: 420,
    pieSliceTextStyle: {
      color: 'transparent'
    }
  };

  var container = document.getElementById('piechart');
  var chart = new google.visualization.PieChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var layout = chart.getChartLayoutInterface();
    var boundsChart = layout.getChartAreaBoundingBox();

    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('fill') === 'none') {
        var bounds = label.getBBox();
        var whiteHat = container.appendChild(document.createElement('img'));
        whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/32/clone_old.png';
        whiteHat.className = 'whiteHat';
        whiteHat.style.top = (bounds.y) + 'px';
        whiteHat.style.left = (bounds.x) + 'px';
      }
    });
  });

  chart.draw(data, options);
});

.whiteHat {
  border: none;
  position: absolute;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>