Google halfdonut Tortendiagramm: Ist es möglich, den Gesamtprozentsatz festzulegen?

Question

Ich machte eine halbe Donut-Chart mit Google-Charts und ich habe ein Problem, dass die Summe der sichtbaren Prozentsätze gleich 50% ist. Gibt es eine mögliche Lösung?

Image of my chart

Answer 1

können Sie den Text auf der Scheibe angezeigt außer Kraft setzen, indem Sie die folgende Konfigurationsoption mit ...

pieSliceText: 'value'

dann in den Daten, stellen Sie den formatierten Wert der Zellen auf die korrekter Prozentsatz ...

var data = [ 
    ['Task', 'Hours'], 

    // use formatted values 
    ['A', {v: 19.2, f: '38.4%'}], 
    ['B', {v: 30.8, f: '61.6%'}], 

    [null, 50] 
]; 

Das folgende Arbeits-Snippet verwendet denselben Ansatz
aber berechnet die korrekten Prozentsätze,
anstatt hart Codierung ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = [ 
 
     ['Task', 'Hours'], 
 
     ['A', 19.2], 
 
     ['B', 30.8], 
 
     [null, 50.0] 
 
    ]; 
 

 
    var total = 0; 
 
    for (var i = 1; i < data.length; i++) { 
 
     if (data[i][0] !== null) { 
 
     total += data[i][1]; 
 
     } 
 
    } 
 

 
    var numberFormat = new google.visualization.NumberFormat({ 
 
     pattern: '#,##0.0', 
 
     suffix: '%' 
 
    }); 
 

 
    var dataTable = google.visualization.arrayToDataTable(data); 
 
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
 
     if (dataTable.getValue(i, 0) !== null) { 
 
     dataTable.setFormattedValue(i, 1, numberFormat.formatValue(((dataTable.getValue(i, 1)/total) * 100))); 
 
     } 
 
    } 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 

 
    var options = { 
 
     height: 400, 
 
     chartArea: { 
 
     top: 24 
 
     }, 
 
     colors: ['#8BC34A', '#64B5F6'], 
 
     legend: 'none', 
 
     pieHole: 0.4, 
 
     pieStartAngle: 270, 
 
     pieSliceText: 'value', 
 
     slices: { 
 
     2: { 
 
      color: 'transparent' 
 
     } 
 
     }, 
 
     theme: 'maximized', 
 
     width: 400 
 
    }; 
 

 
    chart.draw(dataTable, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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