Google Pie Chart - изображения в виде меток - PullRequest
Новая
       9

Google Pie Chart - изображения в виде меток

0 голосов
/ 22 ноября 2018

Я использую обычную круговую диаграмму 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);
  }

Но я бы хотел добавить изображение к каждому ярлыку.Является ли это возможным?Чтобы лучше объяснить, что я ищу, я включаю изображение: enter image description here

1 Ответ

0 голосов
/ 23 ноября 2018

Вы можете использовать положение метки -> 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>
...