我想谷歌餅圖顯示pieSliceText被舍入整數

Question

我正在使用谷歌餅圖，我想要顯示百分比值，但它不是那樣顯示。任何人，建議我一個想法來顯示四捨五入的百分比值。我的代碼看起來像

google.setOnLoadCallback(drawChart); 
        function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
          ['Members', 'Total Members'], 
          ['Members', 23], 
          ['Total Members', 41 - 23] 
         ]); 
        var options = { 
          width: 150, 
          height: 150, 
          chartArea: { 
           width: 150, 
           height: 150, 
           left: 10}, 
          legend: {position: 'none'}, 
          tooltip: {trigger: 'none'}, 
          colors: ['#FEC240', '#FFFFFF'], 
          pieSliceText: 'percentage', 
          pieSliceTextStyle: { 
           bold: true, 
           fontSize: 16, 
           color: 'black' 
          }, 
          enableInteractivity: false, 
          pieSliceBorderColor: "#DFE0E1" 

         }; 
var chart = new 
google.visualization.PieChart(document.getElementById('checkpie')); 
chart.draw(data, options); 

<div id="checkpie" ></div> 

Answer 1

沒有設置相應的片

這樣顯示的百分比的格式標準的選擇，需要計算的百分比手動，
使用選項 - >pieSliceText: 'value' - 上顯示格式化切片價值

見下工作片斷......

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Members', 'Total Members'], 
 
    ['Members', 23], 
 
    ['Total Members', 41 - 23] 
 
    ]); 
 

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

 
    // number formatter 
 
    var formatPercent = new google.visualization.NumberFormat({ 
 
    pattern: '0%' 
 
    }); 
 

 
    // set formatted value for each row 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    var calcPercent = data.getValue(i, 1)/totalData.getValue(0, 1); 
 
    data.setFormattedValue(i, 1, formatPercent.formatValue(calcPercent)); 
 
    } 
 
    
 
    var options = { 
 
    width: 150, 
 
    height: 150, 
 
    chartArea: { 
 
     width: 150, 
 
     height: 150, 
 
     left: 10 
 
    }, 
 
    legend: {position: 'none'}, 
 
    tooltip: {trigger: 'none'}, 
 
    colors: ['#FEC240', '#FFFFFF'], 
 
    pieSliceText: 'value', // <-- show formatted value on slices 
 
    pieSliceTextStyle: { 
 
     bold: true, 
 
     fontSize: 16, 
 
     color: 'black' 
 
    }, 
 
    enableInteractivity: false, 
 
    pieSliceBorderColor: "#DFE0E1" 
 
    }; 
 
    var chart = new google.visualization.PieChart(document.getElementById('checkpie')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="checkpie"></div>