[英]Trying to load google charts into div with jQuery.load
Using a simple google chart, I am trying to use jQuery .load to push/pull that chart into another web page which will have the containing DIV: 我使用一个简单的Google图表,尝试使用jQuery .load将图表推/拉到另一个包含DIV的网页中:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"],callback:drawChart});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id="test_div">this div loads fine</div>
</body>
</html>
and here is a sample page that will have the containing DIV: 这是一个包含DIV的示例页面:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1query.min.js">
</script>
</head>
<body>
<script>
$(document).ready(function(){
$('#my_div').load('chart.html #chart_div', function() { drawChart(); });
});
</script>
<div id="my_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I have tried various loading techniques by removing google.setOnLoadCallback(drawChart); 我通过删除google.setOnLoadCallback(drawChart);尝试了各种加载技术; and replacing it with the $document.ready but nothing seems to work. 并将其替换为$ document.ready,但似乎无济于事。
I have gone through each one of the similar questions posted here but cannot seem to get this working. 我经历了这里发布的每个类似问题,但似乎无法解决这个问题。
any insight appreciated, Thanks! 任何见解表示赞赏,谢谢! edit: I noticed that by adding this line to the "container.html" file: 编辑:我注意到通过将这一行添加到“ container.html”文件中:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
and changing: 并更改:
$('#my_div').load('chart.html #chart_div', function() { drawChart(); });
to 至
$('#my_div').load('chart.html', function() { drawChart(); });
or even: 甚至:
$('#my_div').load('chart.html');
It will indeed load the whole page into "#mydiv" but what I want is to just load the specific "#chart_div" into "#mydiv" 确实会将整个页面加载到“ #mydiv”中,但是我想要的只是将特定的“ #chart_div”加载到“ #mydiv”中
i have similar problem. 我有类似的问题。 My google chart not load with jquery version 1.11.1 if you remove jquery-1.11.1 or similar and add 如果您删除jquery-1.11.1或类似版本并添加,我的Google图表将无法加载jquery 1.11.1版本
<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>`
its working 它的工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.