API диаграммы Google - добавьте процент к ярлыку круговой диаграммы

Question

Я пытаюсь показать круговую диаграмму с меткой и процентом, показанным на каждом фрагменте, с помощью диаграммы google. Кажется, что нет возможности отображать как метку, так и процент, поэтому я отключил показ процента и попытался вручную добавить это на метку. Однако, когда я использую символ процента на этикетке, все начинает действовать.

Как это исправить?

JSFiddle: https://jsfiddle.net/phpsriptkiddie/gscdymqp/1/

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

    var data = google.visualization.arrayToDataTable([ 
     ['Phase', 'link', 'percentage'], 
     ['Phase 1 25%', '/link1', 25], 
     ['Phase 2 25%', '/link2', 25], 
     ['Phase 3 50%', '/link3', 50], 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 2]); 
    var options = { 
       pieSliceText: 'label', 
     tooltip: {trigger: 'none'}, 
       slices: { 
      0: { color: 'yellow', }, 
         1: { color: 'green' }, 
      2: { color: 'grey' }    
       }, 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(view, options); 

    var selectHandler = function(e) { 
    window.location = data.getValue(chart.getSelection()[0]['row'], 1); 
    } 

    // Add our selection handler. 
    google.visualization.events.addListener(chart, 'select', selectHandler); 

    } 

Пожалуйста, обратите внимание, как показано одна метка, в то время как другие нет.

Answer 1

Кажется, что размер области диаграммы просто не был достаточно большим! :-) Проблемы были исправлены, как только я сделал это больше.

<div id="piechart" style="width: 900px; height: 500px;"></div> 

https://jsfiddle.net/phpsriptkiddie/gscdymqp/2/