![wrong wrong](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了多个谷歌图表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,在同一个网页上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!