Google Chart API - 円チャートラベルにパーセントを追加

Question

GoogleチャートAPIを使用して、各スライスにラベルとパーセンテージが表示された円グラフを表示しようとしています。ラベルとパーセンテージの両方を表示することはできないので、パーセンテージの表示を無効にして、これを手動でラベルに追加しようとしています。しかし、ラベルにパーセンテージ記号を使用すると、事態が起き始めます。

どうすればこの問題を解決できますか？

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); 

    } 

他はありませんしながら、1つのラベルが、示されている様子がわかります。

Answer 1

グラフ領域のサイズのように見えるだけでは十分ではありませんでした。 :-) 私がそれを大きくするとすぐに問題が修正されました。

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

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