2012-07-22 3 views
-1

Google 차트를 사용하고 있으며 차트에 데이터를 제공하기 위해 PHP 파일 (또는 HTML 파일 내부의 PHP)에서 데이터를 가져와야합니다. 그렇다면 어떻게해야할까요? 차트를 그리기 전에 데이터를 가져와야합니다. 가 이미 PHP와 MySQL 데이터베이스에서 데이터를 잡아하는 방법을 알아내는 불구 갔다HTML에서 PHP의 vars를 사용하는 가장 쉬운 방법

여기 내가 HTML에서와 같은 어떤 변수가 없습니다

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Color'); 
     data.addColumn('number', 'Votees '); 
     data.addRows([ 
      ['Value from Mysql', 3000], 
      ['Value2 from Mysql', 13000], 

     ]); 

     // Set chart options 
     var options = {'title':'Table Name From MySql', 
         'width':600, 
         'height':450}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 

    <body> 
    <!--Div that will hold the pie chart--> 
     <div id="chart_div"></div> 


    </body> 
</html> 
+0

직접 시도하십시오. –

+0

이 차트를 구현하는 방법에 대한 자세한 정보를 제공해 주시면보다 구체적인 답변을 드릴 수 있습니다.) – Lix

답변

1

에 바르를 넣어하는 데 필요한 코드입니다 - 나는 당신이 어떻게 생각 의미는 Google 차트에 사용하는 코드로 PHP 값을 사용할 수 있기를 원한다는 것입니다. 고글 차트 사용 경험이 많지 않지만 from what I can see JavaScript API를 사용합니다. 아마도 당신이 찾고있는 것은 자바 스크립트 변수로 값을 가져와 차트 플러그인을 다룰 때 사용할 수있는 방법입니다.

이것은 정확히 PHP가 만든 것입니다. 정적 정적 컨텐츠와 스크립트에 동적 컨텐츠를 제공합니다.

예를 들어, PHP는 자바 스크립트 변수를 초기화 할 수 -

<?php 
    $some_php_var = 'overflow'; 
?> 

<script type="text/javascript"> 
    var stack = '<?php echo $some_php_var; ?>'; 
</script> 

지금 당신이 자바 스크립트 변수 stack라고하고 그 값이 '오버 플로우'할 것이다있을 것이다.


가변 기술의 중간에서도 동일한 기술을 임의의 위치에서 사용할 수 있습니다. 예를 들어 코드를 가지고하자 -

// Set chart options 
var options = { 
    'title':'<?php echo $dbResult['Table Name'] ?>', 
    'width':600, 
    'height':450 
}; 
...

data.addRows([ 
    ['<?php echo $dbResult['value1']; ?>', 3000], 
    ['<?php echo $dbResult['value2']; ?>', 13000], 
]); 
+0

가장 좋은 방법은 PHP에서 JavaScript 코드를 생성하지 않는 것입니다 – Azder

+0

OP는 Google 차트 플러그인을 사용하고 있습니다. 그것에. JavaScript 코드를 생성하는 것은 단순히 변수 값을 출력하는 것과는 다릅니다. – Lix

+0

아닙니다. 데이터 또는 자바 스크립트를 생성하거나 물건을 반향 출력하는 것. 그것을 입증하기 위해 내 대답에 두 번째 예제를 추가했습니다. – Azder

1

을 당신은 다음과 같은 PHP에서 값을 삽입 :

<?php echo $myVariableName; ?> 
0

가장 간단한 예 : PHP 파일, like index.php

<!DOCTYPE> 
<html> 
<head> 
<meta charset="UTF-8" /> 
</head> 
<body> 
<?php 
echo $the_data_as_a_string; 
?> 
</body> 

더 나은 방법은 실제로 text/plain 유형의 스크립트 태그를 열고 거기에 데이터를 덤프하는 것입니다.

<!DOCTYPE> 
<html> 
<head> 
<meta charset="UTF-8" /> 
</head> 
<body> 
<script id="the-data" type="text/html" ><?php echo $the_data_as_a_string; ?></script> 
<script type="text/javascript" > 
    var data = document.getElementById('the-data').innerHTML; 
</script> 
</body> 

상단 스크립트 태그

는 브라우저에 의해 실행되지 않지만 하단 하나는 여전히 문자열로 내용을 액세스 및 그것으로 필요로 무엇이든 할 수 있습니다.

편집 :

장점은 안전하게 당신의 .js 파일을 작성하고 그들에게 이렇게 그들이 브라우저에 의해 캐시됩니다 정적 것들을 포함 할 수 있다는 것입니다.

또한 데이터 스크립트를 포함 할 수 있으므로 HTML도 정적 = 브라우저마다 캐시되지 않을 때마다 변경되지 않습니다.

참고 : 이것은 데이터에 대한 lazyman의 ajax 요청이므로 고려해야합니다. :)

+0

하지만이 데이터는 HTML 문서의 다른 위치에서 어떻게 사용합니까? – Keithsoulasa

+0

이전에는이 ​​접근법을 본 적이 없었습니다. 다른 방법에 비해 약간 길다. 당신은 당신의 방법의 이점을 줄 수 있습니까? 나는 [mine] (http://facebook.stackoverflow.com/a/11603372/558021)과 비슷한 해결책으로 도출 가능한 이슈를 이해하고 있지만, 올바르게 처리 된 서버 측을 다루는 경우에는 non-issues가됩니다. – Lix

+0

You Google이 원시 텍스트 데이터를 색인화 할 것이라는 것을 인식하십시오. – Lix

관련 문제