Google Charts API - 원형 차트가 표시되지 않음

Question

시각화를 시도 중입니다 .PieChart가 작동하지만 데이터가 있어도 제목이있는 빈 흰색 상자가 그려집니다. 여기 내 코드가있다. 여기

<div id="globalramdonut" class="globalramdonut"></div> 


google.charts.load('current', {'packages':['corechart','gauge','line','controls','geochart']}); 
google.charts.setOnLoadCallback(drawAllCharts); 

var ramdonutdata; 
function setramdonutdata(){ 
    var query = "SELECT Location, SUM(RAMCapacityGB) AS 'RAM Capacity GB' FROM clusterstat WHERE Date = (SELECT MAX(Date) FROM clusterstat) GROUP BY Location ASC"; 
    //encode the query so we can submit it via URL. 
    var urlencoded = encodeURI(sql2json+query); 
    // get the data returned from 'urlencoded' 
    var jsonData = $.ajax({ 
     url: urlencoded, 
     dataType: "json", 
     async: false 
    }).responseText; 
    console.log(urlencoded); 
    // assign a google DataTable object 
    ramdonutdata = new google.visualization.DataTable(jsonData); 
} 

function drawRamDonut(){ 
    setramdonutdata(); 

    var options = { 
     title: 'RAM Capacity by Location', 
     pieHole: 0.4, 
     sliceVisibilityThreshold: 0 
    }; 

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

function drawAllCharts(){ 
    drawRamDonut(); 
} 

은 .... 읽기

{"cols":[{"label":"Location","type":"string"},{"label":"RAM Capacity GB","type":"number"}],"rows":[{"c":[{"v":"Amsterdam"},{"v":"12286.34"}]},{"c":[{"v":"Argentina"},{"v":"383.97"}]},{"c":[{"v":"Belgium"},{"v":"8189.33"}]},{"c":[{"v":"Brazil"},{"v":"2047.59"}]},{"c":[{"v":"California"},{"v":"14523.22"}]},{"c":[{"v":"Guadalajara"},{"v":"767.90"}]},{"c":[{"v":"Hong Kong"},{"v":"4351.54"}]},{"c":[{"v":"Massachusetts"},{"v":"3647.56"}]},{"c":[{"v":"Ontario"},{"v":"383.97"}]},{"c":[{"v":"Oregon"},{"v":"174896.81"}]},{"c":[{"v":"Shanghai"},{"v":"1279.90"}]},{"c":[{"v":"South Korea"},{"v":"383.19"}]},{"c":[{"v":"Tennessee"},{"v":"3327.52"}]},{"c":[{"v":"Texas"},{"v":"1535.64"}]},{"c":[{"v":"Tokyo"},{"v":"719.64"}]},{"c":[{"v":"Virginia"},{"v":"44882.59"}]}]} 

덕분에 내 PHP 스크립트에서 반환 된 데이터입니다.

Answer 1

처음에는"RAM Capacity GB" 열의 값은 문자열이 아니라 숫자 여야합니다. 매우 추천
차트를해야

{"c":[{"v":"Amsterdam"},{"v":"12286.34"}]}

표시 대신

{"c":[{"v":"Amsterdam"},{"v":12286.34}]}

... ... 또한

,을 (따옴표를 잃게) 아니에 async: false을 사용 실제 URL

를 사용하는 경우전화 대신

, 당신은 구글을 ​​배치 할 수 있습니다 done와 fail 교체

• 다음 작업 조각과 비슷한 설정 제언 done 콜백을 ... 사용 load 명세서의 콜백

google.charts.load('current', { 
 
    callback: function() { 
 
    var query = "SELECT Location, SUM(RAMCapacityGB) AS 'RAM Capacity GB' FROM clusterstat WHERE Date = (SELECT MAX(Date) FROM clusterstat) GROUP BY Location ASC"; 
 

 
    //var urlencoded = encodeURI(sql2json+query); 
 

 
    $.ajax({ 
 
     url: 'test', //urlencoded 
 
     dataType: 'json' 
 
    }).fail(function (jsonData) { // <-- change 'fail' to 'done' 
 

 
     // remove following when using with 'done' 
 
     jsonData = { 
 
     "cols":[ 
 
      {"label":"Location","type":"string"}, 
 
      {"label":"RAM Capacity GB","type":"number"} 
 
     ], 
 
     "rows":[ 
 
      {"c":[{"v":"Amsterdam"},{"v":12286.34}]}, 
 
      {"c":[{"v":"Argentina"},{"v":383.97}]}, 
 
      {"c":[{"v":"Belgium"},{"v":8189.33}]}, 
 
      {"c":[{"v":"Brazil"},{"v":2047.59}]}, 
 
      {"c":[{"v":"California"},{"v":14523.22}]}, 
 
      {"c":[{"v":"Guadalajara"},{"v":767.90}]}, 
 
      {"c":[{"v":"Hong Kong"},{"v":4351.54}]}, 
 
      {"c":[{"v":"Massachusetts"},{"v":3647.56}]}, 
 
      {"c":[{"v":"Ontario"},{"v":383.97}]}, 
 
      {"c":[{"v":"Oregon"},{"v":174896.81}]}, 
 
      {"c":[{"v":"Shanghai"},{"v":1279.90}]}, 
 
      {"c":[{"v":"South Korea"},{"v":383.19}]}, 
 
      {"c":[{"v":"Tennessee"},{"v":3327.52}]}, 
 
      {"c":[{"v":"Texas"},{"v":1535.64}]}, 
 
      {"c":[{"v":"Tokyo"},{"v":719.64}]}, 
 
      {"c":[{"v":"Virginia"},{"v":44882.59}]} 
 
     ] 
 
     }; 
 

 
     var ramdonutdata = new google.visualization.DataTable(jsonData); 
 

 
     var options = { 
 
     title: 'RAM Capacity by Location', 
 
     pieHole: 0.4, 
 
     sliceVisibilityThreshold: 0 
 
     }; 
 

 
     var chart = new google.visualization.PieChart(document.getElementById('globalramdonut')); 
 
     chart.draw(ramdonutdata,options); 
 
    }); 
 
    }, 
 
    packages: ['corechart'] // removed unused packages 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div id="globalramdonut" class="globalramdonut"></div>