无法使用AJAX从另一个HTML文件加载Google图表

Question

Im building a simple web page presenting a simple google pie chart according to data passed with JSstorage. 我建立了一个简单的网页，根据JSstorage传递的数据显示一个简单的Google饼图。 the chart is located in another html file. 图表位于另一个html文件中。 Im trying to populate a div with the chart using AJAX . 我试图使用AJAX用图表填充div 。

the button that activates the drawing process: 激活绘图过程的按钮：

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

the div that will be populated with the chart: 图表中将填充的div ：

<div id="placeForChart" style="width:800; height:700">
     google chart goes here
</div>

the function that being called upon button click : 单击按钮被调用的功能：

 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;
                }
            }

and finally the chart.html , which is pretty much the standard google's example, with modified content passed using JSstorage. 最后是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>

Answer 1

This line will throw a syntax error: 此行将引发语法错误：

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

Your closing parenthesis for the getElementById call is in the wrong place. getElementById调用的getElementById括号放在错误的位置。 It should be: 它应该是：

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

I suspect that you will need to strip any <html> , <head> , and <body> tags from chart.html. 我怀疑您将需要从chart.html中剥离所有<html> ， <head>和<body>标记。 Also, you should probably load the visualization API on your main page and use a load event handler in chart.html to draw the chart. 另外，您可能应该在主页上加载可视化API，并在chart.html中使用load事件处理程序绘制图表。

无法使用AJAX从另一个HTML文件加载Google图表

问题描述

1 个解决方案

解决方案1
0 2014-04-26 14:43:28

无法使用AJAX从另一个HTML文件加载Google图表

问题描述

1 个解决方案

解决方案1 0 2014-04-26 14:43:28

解决方案1
0 2014-04-26 14:43:28