本文介绍了多个谷歌图表API,在同一个网页上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我真的相信我要么是白痴,要么我没有线索。我不能为我的生活在一个网页上获得两个谷歌图表。

 < html>>我已经将它运行了,没有任何错误,但它现在没有显示任何内容? 
< head>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load(visualization,1,{packages:[corechart]});

函数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:'按网站每年总CPU小时数',
hAxis:{title:'Year',titleTextStyle:{color: 'black'}},
vAxis:{title:'1000s CPU Hours',titleTextStyle:{color:'black'}}
};


函数ChartB(){
var data2 = google.visualization.arrayToDataTable([
['Year','Derby','Bristol','Warrington ','RRC','RRD','加拿大'],
['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,469,1.70,0],
['2019',1133.86,0,0.493,1.31,0],
['2020', 2127,0,0,5.31,0.79,0]
]);


var options2 = {
title:'FE代码所需的总CPU时间',
hAxis:{title:'Year',titleTextStyle:{color: 'black'}},
vAxis:{title:'1000s CPU Hours',titleTextStyle:{color:'black'}}
};

函数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_divstyle =width:900px; height:500px;>< / div>
< p>< / p>
< p>< / p>
< div id =chart_divsstyle =width:900px; height:500px;>< / div>
< / body>
< / html>

如果有人知道我要出错的地方,请给我指出。因为我需要在同一页面上获取多个图表



谢谢 解决方案

 < html>正在工作 -  JS在语法上是错误的: 
< head>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>

函数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'美元,美元,美元,美元,美元,欧元,美元,欧元,美元,
['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,14274.78,1292.55,0]
]);

var options1 = {
title:'按网站每年总CPU小时数',
hAxis:{title:'Year',titleTextStyle:{color:'black'}} },
vAxis:{title:'1000s CPU Hours',titleTextStyle:{color:'black'}}
};
$ b var data2 = google.visualization.arrayToDataTable(
[
['Year','Derby','Bristol','Warrington','RRC','RRD' ,'加拿大'],
['2012',275.82,1.145,0,2.71,18.44,0],
['2013',398.29,0.04,0.31,29.38,0],
['2014',509.84,0.04,0,3.29,26.05,0],
['2015',723.08,0,0.354,13.09,0],
['2014' 2016'',951.38,0,0.390,7.59,0],
['2017',609.01,0,0.432,3.92,0],
['2018',1002.65,0 ,0,4.69,1.70,0],
['2019',1133.86,0,0.493,1.31,0],
['2020',2127,0,0,5.31,0.79 ,0]
]);

var options2 = {
title:'FE代码所需的总CPU时间',
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_divstyle =width:900px; height:500px;>< / div>
< p>< / p>

< p>< / p>

< div id =chart_divsstyle =width:900px; height:500px;>< / div>
< / body>
< / html>


I honestly believe I'm either being an idiot or I dont have a clue. I cannot for the life of me get two google charts on one web page. I've got it running without any error but it doesnt show anything now?

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

If someone knows where I'm going wrong in displaying them please point it out to me. as I need to get multiple charts on the same page

Thanks

解决方案

That one is working - the JS was syntactically wrong :

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

这篇关于多个谷歌图表API,在同一个网页上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 12:28
查看更多