Google 차트/json 데이터 작업에 문제가 발생했습니다.

안녕하세요. Google의 API를 사용하여 몇 가지 게이지가있는 간단한 페이지를 생성하려고합니다. 나는 온라인에서 찾을 수있는 모든 정보를 계속해서 읽었으며 빈 페이지를 표시하는 이유를 알아낼 수 없습니다. 나는 이전에 그것을 사용하지 않았기 때문에 나의 json을 의심한다.Google 차트/json 데이터 작업에 문제가 발생했습니다.

getData.php에 의한 JSON 출력은 다음과 같습니다

는

[{"hostname":"bongo","value":24},{"hostname":"chappie","value":78}]

게이지를 생성해야 PHP 스크립트는 다음과 같습니다

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="jquery-1.6.4.js"></script> 
    <script type="text/javascript"> 

    google.load('visualization', '1', {packages:['gauge']}); 

    google.setOnLoadCallback(drawChart); 


    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.php", 
      dataType:"json", 
      async: false 
      }).responseText; 

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

    var options = { 
      width: 400, height: 120, 
      redFrom: 90, redTo: 100, 
      yellowFrom:75, yellowTo: 90, 
      minorTicks: 5 
     }; 

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

    </script> 
    </head> 
    <body> 
    <div id='chart_div'></div> 
    </body> 
</html>

출처

2012-09-28 spoovy

귀하의 JSON 데이터 형식이 잘못되었습니다 및 U 게이지를 잘못-입력 게이지로. 난 당신의 코드를 수정하고 다음과 같이이 (당신이 중첩 배열과 출력에 데이터 테이블 JSON 문자열 형식을 Google에 부합 JSON 문자열로 json_encode PHP는 기능을 사용할 수 있습니다, 그런데) 내 PHP 서버에서 작동 :

<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript"> 

    google.load('visualization', '1', {packages:['gauge']}); 

    google.setOnLoadCallback(drawChart); 


    function drawChart() { 
    var jsonData = { 
        cols: [{id: 'Host Name', label: 'Host Name', type: 'string'}, 
          {id: 'Value', label: 'Value', type: 'number'}], 
        rows: [{c:[{v: 'bongo'}, {v: 24}]}, 
          {c:[{v: 'chappie'}, {v: 78}]}] 
        } 

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

    var options = { 
     width: 400, height: 120, 
     redFrom: 90, redTo: 100, 
     yellowFrom:75, yellowTo: 90, 
     minorTicks: 5 
    }; 

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

</script> 
</head> 
<body> 
    <div id='chart_div'></div> 
</body>

을 디버깅의 경우 다음을 수행 할 수 있습니다. google.visualization.events.addListener (bar_chart_example, 'error', function (err) { document.getElementById ('bar_chart_example_div'). innerHTML = err.message; });

출처

2012-10-12 15:50:33 MrTan

Google 차트/json 데이터 작업에 문제가 발생했습니다.

답변

관련 문제