Показывать только процент в Google Visualization Chart API


Можно ли показывать только процент в Google Visualization Chart API?

Я не могу найти ничего об этом в docs

У меня есть pieSliceText: 'percentage', но я также хочу показать только%, когда я наведу курсор. Введите описание изображения здесь

1 2

1 ответ:

Вы можете предоставить свою собственную подсказку

Здесь используется метод group, чтобы найти общее число всех строк...

  var total = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

Затем представление данных используется для добавления столбца всплывающей подсказки, в котором вычисляется процент...

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      var percent = (dt.getValue(row, 1) / total.getValue(0, 1)) * 100;
      return '<div class="tooltip">' + dt.getValue(row, 0) + ':&nbsp;<span>' + percent.toFixed(1) + '%</span>';
    },
    p: {html: true}
  }]);

См. следующий рабочий фрагмент...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieSliceText: 'percentage',
    tooltip: {
      isHtml: true
    }
  };

  var total = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    type: 'string',
    role: 'tooltip',
    calc: function (dt, row) {
      var percent = (dt.getValue(row, 1) / total.getValue(0, 1)) * 100;
      return '<div class="tooltip">' + dt.getValue(row, 0) + ':&nbsp;<span>' + percent.toFixed(1) + '%</span>';
    },
    p: {html: true}
  }]);

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(view.toDataTable(), options);
}
.tooltip {
  font-size: 12pt;
  padding: 6px;
}

.tooltip span {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>