Показывать только процент в Google Visualization Chart API
Можно ли показывать только процент в Google Visualization Chart API?
Я не могу найти ничего об этом в docs
У меня есть pieSliceText: 'percentage'
, но я также хочу показать только%, когда я наведу курсор.
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) + ': <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) + ': <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>