通过ajax调用在php页面上加载Chart.js无效

Question

我有一个简单的ajax调用，正在加载一个php页面。我正在使用chart.js根据动态MySQL数据构建条形图。

如果我直接浏览此页面，它可以正常工作。但是，如果我使用以下代码加载页面，页面上的数据会加载，但图表不会加载。

我用来调用ajaxtest.php页面的脚本位于index.php页面中：

    <script>
                function getProduct(str) {
                    if (str == "") {
                        document.getElementById("txtHint").innerHTML = "";
                        return;
                    } else { 
                        if (window.XMLHttpRequest) {
                            // code for IE7+, Firefox, Chrome, Opera, Safari
                            xmlhttp = new XMLHttpRequest();
                        } else {
                            // code for IE6, IE5
                            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                document.getElementById("loader").innerHTML = ''; // Hide the image after the response from the server
                                document.getElementById("txtHint").innerHTML = this.responseText;

                            }
                        };
                        document.getElementById("loader").innerHTML = '<img src="imgs/loader.gif" />'; // Set here the image before sending request
                        xmlhttp.open("GET","ajaxTest.php?prod="+str,true);
                        xmlhttp.send();

                    }
                }
                </script>

在这个文件中，我在head部分加载了bootstrap.css。在页面的底部，我正在加载jquery.js，bootstrap.js和一些customizations.js文件（按此顺序）。如果我从index.php页面中删除它们，它没有任何区别，图表仍然没有加载。

在ajaxtest.php页面上，我也可以在相同位置调用相同的文件。

我认为这可能是我的问题，所以当我从index.php页面删除它时，它仍然无法加载。

我很困惑为什么它在通过ajax调用它时不会加载但是当我直接点击它时。我没有在firebug / developer工具中看到任何错误。

任何想法都会受到赞赏。