동일한 페이지에 여러 개의 Google 차트 표시

나는 multiple google charts api, on same web page과 몇 개의 다른 URL을 조사했지만 초대했습니다. 내 페이지에 여러 개의/단일 Google 차트를로드 할 수 없습니다. 단일 차트는 쉽게 올 수 있지만 다른 차트를 입력하자마자 모든 차트가 표시됩니다. 내 Google 차트는 PHP 스크립트 안에 있습니다. 값은 데이터베이스에서 성공적으로 가져 오지만 Google 차트는로드되지 않습니다. 오류를 모르겠다. 어떤 도움을 주셔서 감사합니다. 모든 "chart_div"라고 코드의 맨 아래에동일한 페이지에 여러 개의 Google 차트 표시

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
google.load('visualization', '1', {packages:'gauge','table', 'corechart']}); 
</script> 

<script type='text/javascript'> 
google.setOnLoadCallback(initialize); 
function initialize() 
{ 

function drawVisualization() { 
      drawA(); 
      drawB(); 
     drawC(); 
         } 

function drawA() { 
    var data_PUE = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['PUE',<?php echo $r_PUE['PUE']; ?> ] ]); 

var options_PUE = { 
      width : 800, 
      height : 240, 
      redFrom: 2.5, redTo: 5, 
      yellowFrom:1.5, yellowTo: 2.5, 
      greenFrom:0, greenTo: 1.5, 
      minorTicks: 1, 
      max:5 
       }; 
var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
chart.draw(data_PUE, options_PUE); 
     } 

function drawB() { 
    var data_CEC = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['CEC',<?php echo $r_EDF_CEC['CEC']; ?> ] ]); 

var options_CEC = { 
      width : 120, 
      height : 120, 
      redFrom: 1, redTo: 3, 
      yellowFrom:.5, yellowTo: 1, 
      greenFrom:0, greenTo: .5, 
      minorTicks: .5, 
      max:3 
       }; 
    var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1')); 
    chart1.draw(data_CEC, options_CEC); 
     } 

function drawC() { 
    var data_LEC = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['LEC',<?php echo $r_EDF_LEC['LEC']; ?> ] ]); 

var options_LEC = { 
      width : 120, 
      height : 120, 
      redFrom: .05, redTo: .1, 
      yellowFrom:.01, yellowTo: .05, 
      greenFrom:0, greenTo: .01, 
      minorTicks: .01, 
      max:.05 
       }; 
    var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));  
    chart2.draw(data_LEC,options_LEC); 
     } 
} 

    </script> 

<div id="chart_div" style="width: 200px; height: 150px;"></div> 
<p></p> 
<div id="chart_div" style="width: 200px; height: 150px;"></div> 
<p></p> 
<div id="chart_div" style="width: 200px; height: 150px;"></div> 
<p></p>

출처

2014-03-29 rishi jain

가

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

그것은

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

그리고 마지막으로해야한다 :

<div id="chart_div" style="width: 200px; height: 150px;"></div> 
<p></p> 
<div id="chart_div" style="width: 200px; height: 150px;"></div> 
<p></p> 
<div id="chart_div" style="width: 200px; height: 150px;"></div>

나는 chart_div이 chart_div1가, 불을 지르고에서 chart_div2

디버깅 다른 오류를 제공합니다 당신이 무슨 뜻 확실 해요 function initialize()은 다른 functi가 있기 때문에 아무 것도하지 않습니다. 에 drawVisualization()라는 그림이 그려져 있습니다. drawVisualization()을 호출하거나 함수 선언을 제거하십시오.

http://jsbin.com/xerewuva/1/edit

출처

2014-03-29 04:07:54 hrgui

감사합니다. 내가 그것을 시도하자. –

우수. 작동 해. 주로 패키지 다음에 브래킷이있는 것이 문제였습니다. 나는 그것을 잡았어야했다. .. 나쁘다. google.load ('시각화', '1', {패키지 : [ '게이지', '테이블', '코어 차트']}); –

귀하의 사업부 아이디의하지만 document.getElementById를이의이 설정됩니다 : 코드는 다음과 같습니다

document.getElementById('chart_div') 
document.getElementById('chart_div1') 
document.getElementById('chart_div2')

변화에 일치하도록 사업부 아이디의 :

<div id="chart_div" style="width: 200px; height: 150px;"></div> 
<div id="chart_div1" style="width: 200px; height: 150px;"></div> 
<div id="chart_div2" style="width: 200px; height: 150px;"></div>

:-) 여기에 오류가

출처

2014-03-29 04:04:46 JayG

동일한 페이지에 여러 개의 Google 차트 표시

답변

관련 문제