一頁可以有多個谷歌圖表嗎？
[英]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>
3 個解決方案
解決方案1
12 已采納 2011-07-18 15:03:06
問題出在您的 div 中。
替換這個：
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
有了這個：
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
解決方案2
0 2013-01-16 16:43:14
只是扔掉一些與我遇到的問題有關的信息（不是 OP 的確切 Q）。
當您想在一個頁面上繪制多個圖表時，您必須為您的目標 div 使用不同的 id (duh.)，因此，如果您的頁面應該有多個圖表但只有 1 個（或 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>
解決方案3
0 2012-02-26 10:38:36
可能不是您的問題，但在相關說明中，我發現如果您在同一頁面上有很多 Google 可視化（我相信它在 50 左右），Google 將限制使用，並停止正確渲染。
頁面上有多個 Google 圖表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.