的javascript - 如何加載在同一頁上的兩個谷歌的圖表，不同的div

Question

十幾研究之後，還是沒能解決我的問題出在同一頁上的兩個圖像（以Google Charts）。

我無法弄清楚什麼是錯還是什麼我忘了，如果有人可以給我一些提示或點我，我錯過了什麼，我會很感激。

我能顯示1點的圖表，但是當我試圖表明一個又一個，第一個自敗。

這裏是我的代碼：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

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


    //google.setOnLoadCallback(drawChartAtleta); 
    //google.setOnLoadCallback(drawChartSexo); 
    google.setOnLoadCallback(function() { 
     drawChartAtleta(); 
     drawChartSexo(); 
    });  


    //Grafico Atleta por esporte 
    function drawChartAtleta() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Esporte'); 
     data.addColumn('number', 'Quantidade'); 
     data.addRows([ 
      ['Basquete', 30], 
      ['Tenis de Mesa', 17] 
     ]); 

     var options = { 
      'title': 'Por Esporte', 
      'width': 500, 
      'height': 300 
     }; 


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

    //Grafico por Sexo 
    function drawChartSexo() { 


     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Sexo'); 
     data.addColumn('number', 'Quantidade'); 
     data.addRows([ 
      ['Masculino', 165], 
      ['Feminino', 67] 
     ]); 


     var options = { 
      'title': 'Por Sexo', 
      'width': 500, 
      'height': 300 
     }; 


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


</script> 

<div class="container"> 
    <div class="col-lg-12"> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <div id="char_sexo"></div> 
      </div>     
     </div> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <div id="char_atleta"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

這是你的腳本工作，你在呼喚：中google.visualization.CollumChart代替google.visualization.ColumnChart，經常檢查JavaScript錯誤在b rowser開發人員的控制檯。 （F12通常）

檢查谷歌圖表更多信息文檔中關於column charts

<div class="container"> 
 
    <div class="col-lg-12"> 
 
     <div class="col-lg-6"> 
 
      <div class="form-group"> 
 
       <div id="char_sexo"></div> 
 
      </div>     
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <div class="form-group"> 
 
       <div id="char_atleta"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 

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

 

 
    //google.setOnLoadCallback(drawChartAtleta); 
 
    //google.setOnLoadCallback(drawChartSexo); 
 
    google.setOnLoadCallback(function() { 
 
     drawChartAtleta(); 
 
     drawChartSexo(); 
 
    });  
 

 

 
    //Grafico Atleta por esporte 
 
    function drawChartAtleta() { 
 

 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('string', 'Esporte'); 
 
     data.addColumn('number', 'Quantidade'); 
 
     data.addRows([ 
 
      ['Basquete', 30], 
 
      ['Tenis de Mesa', 17] 
 
     ]); 
 

 
     var options = { 
 
      'title': 'Por Esporte', 
 
      'width': 500, 
 
      'height': 300 
 
     }; 
 

 
     //This line was changed. 
 
     var chart = new google.visualization.ColumnChart(document.getElementById('char_atleta')); 
 
     chart.draw(data, options); 
 
    } 
 

 
    //Grafico por Sexo 
 
    function drawChartSexo() { 
 

 

 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('string', 'Sexo'); 
 
     data.addColumn('number', 'Quantidade'); 
 
     data.addRows([ 
 
      ['Masculino', 165], 
 
      ['Feminino', 67] 
 
     ]); 
 

 

 
     var options = { 
 
      'title': 'Por Sexo', 
 
      'width': 500, 
 
      'height': 300 
 
     }; 
 

 

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

 

 
</script>