多个谷歌图表api,在同一个网页上
multiple google charts api, on same web page
我真的相信我要么是个白痴,要么一无所知。我一辈子都无法在一个网页上获得两个谷歌图表。我让它运行时没有任何错误,但它现在什么都不显示?
<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>
如果有人知道我在显示它们时出错了,请向我指出。因为我需要在同一页面上获得多个图表
感谢
这个正在工作-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>
相关文章:
- 如何防止网页加载后自动启动功能
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 如何使用Node.js最有效地解析网页
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 刷新后保留对网页的更改
- AJAX不会在文件上传后重定向到网页-POST方法
- 使用谷歌网站翻译器自动翻译网页
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- 仅重新加载网页的一部分
- 每次提交表单时都会重新加载网页
- 打开网页后立即获取网页的活动javascript函数
- 链接两个网页或网络应用程序的最佳方式
- Android键盘不适用于包含Javascript的网页
- 在同一个javascript事件处理程序中调用不同的函数
- 网页上失败的javascript会导致所有其他脚本失败
- 通过javascript在同一个打开的选项卡中重新加载新的网页内容
- 如何在同一个网页上创建两个连接列表
- 多个谷歌图表api,在同一个网页上
- 如何制作我的网页,如果有人关闭了它,那么下次打开时应该从同一个页面开始
- 我们能否将表单元素的值传递给同一个网页中的函数?