多個谷歌圖表API，在同一網頁

我真的相信我要麼是個白癡，要麼我沒有線索。我不能爲我的生活在一個網頁上獲得兩個谷歌圖表。我已經運行了沒有任何錯誤，但它現在不顯示任何內容？多個谷歌圖表API，在同一網頁

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

function ChartA() {   
var data1 = google.visualization.arrayToDataTable([   
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],   
['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00],   
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],   
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],   
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86], 
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] , 
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] , 
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] , 
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] , 
['2020', 1484193.59,0, 0, 14274.78, 1292.55, 0]   
]);   


var options1 = {   
title: 'Total CPU Hours Per Year By Site',   
hAxis: {title: 'Year', titleTextStyle: {color: 'black'}}, 
vAxis: {title: '1000s CPU Hours', titleTextStyle: {color: 'black'}} 
}; 


function ChartB() {   
var data2 = google.visualization.arrayToDataTable([   
['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],   
['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],   
['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],   
['2014', 509.84, 0.04, 0 , 3.29, 26.05, 0],   
['2015', 723.08, 0, 0, 3.54, 13.09, 0], 
['2016', 951.38, 0, 0, 3.90, 7.59, 0] , 
['2017', 609.01, 0, 0, 4.32, 3.92, 0] , 
['2018', 1002.65, 0 , 0, 4.69, 1.70, 0] , 
['2019', 1133.86, 0, 0, 4.93, 1.31, 0] , 
['2020', 2127, 0 ,0, 5.31, 0.79, 0]   
]);   


var options2 = {   
title: 'Total CPU Hours Required For FE Code',   
hAxis: {title: 'Year', titleTextStyle: {color: 'black'}}, 
vAxis: {title: '1000s CPU Hours', titleTextStyle: {color: 'black'}} 
};   

function drawcharts(){ 
draw.ChartA(); 
draw.ChartB(); 
} 

google.setOnLoadCallback(drawcharts); 

var chartA = new google.visualization.AreaChart(document.getElementById('chart_div')); 
chartA.draw(data1, options1); 
var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));   
chartB.draw(data2, options2);   


    } 
    }  
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    <p></p> 
    <p></p> 
    <div id="chart_divs" style="width: 900px; height: 500px;"></div> 
    </body> 
    </html>

如果有人知道我要出錯的地方，請給我指出。因爲我需要在同一頁上獲得多個圖表

感謝

來源

2012-07-10 Zenaphor

，一個是工作 - 在JS是語法錯誤：

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

     function drawcharts() { 

      var data1 = google.visualization.arrayToDataTable(
        [ 
         ['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'], 
         ['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00], 
         ['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43], 
         ['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71], 
         ['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86], 
         ['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] , 
         ['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] , 
         ['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] , 
         ['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] , 
         ['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0] 
        ]); 

      var options1 = { 
       title:'Total CPU Hours Per Year By Site', 
       hAxis:{title:'Year', titleTextStyle:{color:'black'}}, 
       vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}} 
      }; 

      var data2 = google.visualization.arrayToDataTable(
        [ 
         ['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'], 
         ['2012', 275.82, 1.145, 0, 2.71, 18.44, 0], 
         ['2013', 398.29, 0.04, 0, 3.01, 29.38, 0], 
         ['2014', 509.84, 0.04, 0 , 3.29, 26.05, 0], 
         ['2015', 723.08, 0, 0, 3.54, 13.09, 0], 
         ['2016', 951.38, 0, 0, 3.90, 7.59, 0] , 
         ['2017', 609.01, 0, 0, 4.32, 3.92, 0] , 
         ['2018', 1002.65, 0 , 0, 4.69, 1.70, 0] , 
         ['2019', 1133.86, 0, 0, 4.93, 1.31, 0] , 
         ['2020', 2127, 0 , 0, 5.31, 0.79, 0] 
        ]); 

      var options2 = { 
       title:'Total CPU Hours Required For FE Code', 
       hAxis:{title:'Year', titleTextStyle:{color:'black'}}, 
       vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}} 
      }; 

      var chartA = new google.visualization.AreaChart(document.getElementById('chart_div')); 
      chartA.draw(data1, options1); 

      var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs')); 
      chartB.draw(data2, options2); 
     } 

     google.setOnLoadCallback(drawcharts); 
     google.load("visualization", "1", {packages:["corechart"]}); 

    </script> 
</head> 
<body> 
<div id="chart_div" style="width: 900px; height: 500px;"></div> 
<p></p> 

<p></p> 

<div id="chart_divs" style="width: 900px; height: 500px;"></div> 
</body> 
</html>

來源

2012-07-10 08:13:27

感謝，我有兩個現在的工作，如果我嘗試和添加一個第三或第四個讓我說的功能我會得到一個圖表與數據和軸，但沒有在軸上的值，即年份和數量？任何想法爲什麼會這樣？ – Zenaphor 2012-07-10 10:09:35

多個谷歌圖表API，在同一網頁

回答

相關問題