是否有可能有多个谷歌图表在一个页面
is it possible to have multiple google charts in one page?
我使用谷歌可视化api。以下是我的示例代码。这两个图表中的任何一个都可以显示,如果它是唯一要绘制的。但是我不能同时工作。谢谢你的建议。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Home Page</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//Load the Visualization API and the ready-made Google table visualization
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type='text/javascript'>
function drawA() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl');
wrap.setContainerId('checkin-column');
wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
wrap.draw();
wrap.getChart();
}
function drawB() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl2');
wrap.setContainerId('redemption-table');
wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
wrap.draw();
}
function drawVisualization() {
drawA();
drawB();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
</body>
</html>
问题出在你的div。
替换:
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
与这个:
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
可能不是你的问题,但在相关的笔记中,我发现如果你在同一页面上有很多谷歌可视化(我相信它在50左右),谷歌将限制使用,并停止正确呈现
只是抛出一些与我遇到的问题相关的信息(不是OP的确切Q)。
当你想在一个页面上绘制多个图表时,你必须为你的目标div使用不同的id(呸!)所以如果你有一个页面应该有多个图表但只有一个(或N <(预期)正在呈现,仔细检查每个图表是否有唯一的div id,并且JavaScript的目标是唯一的div id。
例如,下面将只显示一张图表:
<div id="chart"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 1.0, 2.0]
]);
var options = {
title: 'MyChart',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 4.0, 5.0]
]);
var options = {
title: 'MyChart2',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
相关文章:
- 如何让我的网站上的WEBP图像加载在morzilla firefox中有一个可能的解决方案吗?如果是,那么如何
- 可能有一个javascript和php的配置文件
- 有两个popover.同时,不应显示两个弹出窗口.一次只能看到一个popover.有可能吗
- 一个有内容的iFrame怎么可能有一个未定义的contentDocument对象
- MongoDB内部的一个查询中可能有多个条件
- 在Javascript中,从localStorage检索时是否可能有一个等待动画
- Javascript:有没有可能有一个函数在Object/String..创建
- 是否有可能有一个按钮,可以切换音频的播放状态
- 是否有可能在图像的一个角落有一个alpha透明度与以下要求
- 有可能有一个SPA包含多个其他SPA与Durandal
- 使用GET方法选择表单——是否有可能有一个不向URL添加任何内容的选项?
- 是否可能有一个Javascript函数有两个或更多的函数在里面
- 是否可能有一个Javascript变量有两个或更多的函数在里面
- 是否有可能有一个链接不可见/隐藏在网页源,但活跃时,按钮点击
- 有可能有一个wijgrid细胞类型的对象
- 是否有可能有一个greasemonkey脚本,是自动加载到一个网页内的所有框架
- 你可能有一个脚本在HTML文本区/文本字段,并有它执行
- 在iOS的Safari中,是否有可能有一个按钮将文本复制到剪贴板
- 是否有可能有多个谷歌图表在一个页面
- 是否有可能有一个来回按钮