Fügen Sie Suffix mit "google.visualization.NumberFormat"

Question

Sie haben versucht, ein '%' neben dem Wert in einem Google Gauge-Diagramm hinzuzufügen, ich bin sicher, es ist etwas Dummes, das ich vermisse. Hier

ist, was ich versuchte, mit einem anderen Beitrag: Adding a % sign to Google Gauges

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

       function drawChart() { 

        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Z-eKZJ_XbmnoLYyG4cht40KMo07_CYnLP-hPi1ZBjnw/edit#gid=0'); 
        query.send(handleQueryResponse); 

        var options = { 
         redFrom: 0, 
         redTo: 35, 
         yellowFrom: 35, 
         yellowTo: 65, 
         greenFrom: 65, 
         greenTo: 100, 
         minorTicks: 5 
        }; 
        var formatter = new google.visualization.NumberFormat({suffix: '%'}); formatter.format(data,1); 
function handleQueryResponse(response) { 
         var data = response.getDataTable(); 
         new google.visualization.Gauge(document.getElementById('gaugechart')).draw(data); 
        } 
       } 

Jeder Schub in der richtigen Richtung wäre sehr willkommen, und bitte sanft sein ...

FYI dies ist mein erster Beitrag hier in Stack Exchange, jeder Formatierungsfehler oder Frage Nono's lassen Sie mich wissen.

Answer 1

Notwendigkeit, bis die Daten zu warten, wird zurückgeführt, bevor die formatter
bewegen es in handleQueryResponse

google.charts.load('current', { 
 
    callback: function() { 
 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Z-eKZJ_XbmnoLYyG4cht40KMo07_CYnLP-hPi1ZBjnw/edit#gid=0'); 
 
    query.send(handleQueryResponse); 
 

 
    function handleQueryResponse(response) { 
 
     var data = response.getDataTable(); 
 

 
     var formatter = new google.visualization.NumberFormat({pattern: '0', suffix: '%'}); 
 
     formatter.format(data, 1); 
 

 
     var options = { 
 
     redFrom: 0, 
 
     redTo: 35, 
 
     yellowFrom: 35, 
 
     yellowTo: 65, 
 
     greenFrom: 65, 
 
     greenTo: 100, 
 
     minorTicks: 5 
 
     }; 
 

 
     new google.visualization.Gauge(document.getElementById('gaugechart')).draw(data, options); 
 
    } 
 
    }, 
 
    packages: ['gauge'] 
 
});

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