简体   繁体   English

尝试使用jQuery.load将Google图表加载到div中

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM