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>