Javascript 无法使用AJAX从另一个html文件加载google图表_Javascript_Jquery_Html_Ajax_Google Visualization

Javascript 无法使用AJAX从另一个html文件加载google图表

javascript jquery html ajax google-visualization

Javascript 无法使用AJAX从另一个html文件加载google图表,javascript,jquery,html,ajax,google-visualization,Javascript,Jquery,Html,Ajax,Google Visualization,我正在构建一个简单的网页，根据JSstorage传递的数据显示一个简单的谷歌饼图。该图表位于另一个html文件中。我正在尝试使用AJAX用图表填充一个div 激活绘图过程的按钮： <input type="button" name="showChart" value="Show Chart" onclick="drawChart()"> 正在调用的函数单击按钮： function drawChart() { $.jStora

我正在构建一个简单的网页，根据JSstorage传递的数据显示一个简单的谷歌饼图。该图表位于另一个html文件中。我正在尝试使用AJAX用图表填充一个div

激活绘图过程的按钮：

<input type="button" name="showChart" value="Show Chart" onclick="drawChart()">

正在调用的函数单击按钮：

 function drawChart()
            {
                $.jStorage.set("costsArr",costsArr);
                document.getElementById('placeForChart'.innerHTML = loadChart('chart.html'));
                function loadChart(href)
                {
                    console.log("load chart function was called..");
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("GET", href, false);
                    xmlhttp.send();
                    return xmlhttp.responseXML;
                }
            }

最后是chart.html，它几乎是google的标准示例，使用JSstorage传递修改后的内容

<head>
   <script type="text/javascript">
    var costsArr = $.jStorage.get('costsArr');

            google.load('visualization', '1.0', {'packages':['corechart']});
            google.setOnLoadCallback(drawChart);

            function drawChart() {

                // Create the data table.
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Topping');
                data.addColumn('number', 'Slices');
                data.addRows([
                    ['food', costsArr[0]],
                    ['clothes', costsArr[2]],
                    ['house holds', costsArr[1]],
                    ['other', costsArr[3]]

                ]);

                var options = {'title':'your expenses',
                    'width':500,
                    'height':400};

                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
    </script>
</head>

此行将抛出语法错误：

document.getElementById('placeForChart'.innerHTML = loadChart('chart.html'));

getElementById调用的右括号位置错误。应该是：

document.getElementById('placeForChart').innerHTML = loadChart('chart.html');

我怀疑您需要从chart.html中删除任何、和标记。此外，您可能应该在主页上加载可视化API，并使用chart.html中的加载事件处理程序绘制图表。

谢谢您的回答。你的意思是我应该将chart.html保存为JS文件并去掉所有标记，使其成为平面javascript文件？你可以这样做，但为什么不正常地包含javascript并在进行AJAX调用时使用的任何事件处理程序中绘制图表？

document.getElementById('placeForChart').innerHTML = loadChart('chart.html');