0

老实说，我相信我要么是个白痴，要么我不知道。我一辈子都无法在一个网页上获得两个谷歌图表。我已经让它运行没有任何错误，但它现在没有显示任何东西？

<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>

如果有人知道我在显示它们时哪里出错了，请向我指出。因为我需要在同一页面上获取多个图表

谢谢

4

1 回答 1

2

那个正在工作 - 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-10T08:13:27.220 回答