Добавить суффикс, используя «google.visualization.NumberFormat»

Question

Пробовал добавить «%» рядом со значением на диаграмме Google Gauge, я уверен, что это что-то глупое, которого я не вижу.

Вот что я пытался, следуя другому сообщению: 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); 
        } 
       } 

Любой толчок в правильном направлении будет высоко ценится, и, пожалуйста, быть нежным ...

FYI это мой первый пост здесь, в Stack Exchange, любая ошибка форматирования или вопрос nono, дайте мне знать.

Answer 1

нужно ждать, пока данные возвращаются, прежде чем пытается использовать formatter
переместить его в 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>