0

状況は次のとおりです。

ファイル 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) が完全に空 (空白) になります。コンソールにはエラーはありません。ファイル 2 のコードをファイル 1 で直接実行すると、チャートは正しくレンダリングされます。ここで私が間違っていることを誰かが指摘できますか?

4

1 に答える 1

0

試す：

$.ajax({url: "grafs.php", function(data) {
    $(".mycontainer").html(data);
  });

また

getScriptの代わりに使用load:

http://api.jquery.com/jQuery.getScript/

于 2012-05-24T14:53:28.780 に答える