以下是情况:
文件1:index.php
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
...
<div class="mycontainer"></div>
<script>
$(function() {
$(".mycontainer").load("grafs.php");
});
</script>
文件2:grafs.php
...
<script src="/js/highcharts.js"></script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'mychart01',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
<div id="mychart01" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
这使得DIV(mychart01)完全为空(空白)。 在控制台没有错误。 如果我直接在文件1中运行文件2中的那段代码,则图表会正确呈现。 谁能指出我在这里做错了什么?
答案 0 :(得分:0)
尝试:
$.ajax({url: "grafs.php", function(data) {
$(".mycontainer").html(data);
});
或
使用getScript
代替load
: