Question

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

激活绘图过程的按钮：

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

将填充图表的div：

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

按钮点击时调用的功能：

 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，这几乎是标准的谷歌示例，使用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

此行将引发语法错误：

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

getElementById来电的右括号位于错误的位置。它应该是：

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

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

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

1 个答案: