Question

使用简单的谷歌图表，我试图使用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>

这是一个包含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>

我通过删除google.setOnLoadCallback（drawChart）尝试了各种加载技术; 并用$ document.ready替换它，但似乎没什么用。

我已经完成了这里发布的每一个类似的问题，但似乎无法实现这一点。

有任何见解，谢谢！编辑：我注意到通过将此行添加到＆＃34; container.html＆＃34;文件：

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

并改变：

    $('#my_div').load('chart.html #chart_div', function() { drawChart(); });

到

   $('#my_div').load('chart.html', function() { drawChart(); });

甚至：

   $('#my_div').load('chart.html');

它确实会将整个页面加载到＃34; #mydiv＆＃34;但我想要的只是加载特定的＆＃34;＃chart_div＆＃34;进入＆＃34; #mydiv＆＃34;

Answer 1

我有类似的问题。我的谷歌图表没有加载jquery版本1.11.1 如果你删除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>`

其工作

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

1 个答案: