Javascript jQuery加载-谷歌可视化页面_Javascript_Jquery_Google Visualization

Javascript jQuery加载-谷歌可视化页面

javascript jquery google-visualization

Javascript jQuery加载-谷歌可视化页面,javascript,jquery,google-visualization,Javascript,Jquery,Google Visualization,我有一个带有几个链接和一个div的页面，在同一个页面上我将加载其他内容。其中一些内容是谷歌可视化图表作为测试，我突然输入了谷歌折线图代码。页面本身加载良好，但当我尝试将其加载到div（使用jQuery）时，它不起作用。Firefox说从google.com传输数据什么也不做，IE 6有一个JS错误，说google未定义我不明白为什么这会是一个问题，但该页面位于内部网上…如果这有助于排除故障的话谢谢你事先提供的一切帮助下面是将mainContent.html文件加载到div中的代码

我有一个带有几个链接和一个div的页面，在同一个页面上我将加载其他内容。其中一些内容是谷歌可视化图表

作为测试，我突然输入了谷歌折线图代码。页面本身加载良好，但当我尝试将其加载到div（使用jQuery）时，它不起作用。Firefox说从google.com传输数据什么也不做，IE 6有一个JS错误，说

google

未定义

我不明白为什么这会是一个问题，但该页面位于内部网上…如果这有助于排除故障的话

谢谢你事先提供的一切帮助

下面是将mainContent.html文件加载到div中的代码

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#A2W").click(function(){
                $("#loadContent").load("mainContent.html");
            });
        }); 
    </script>


$（文档）.ready（函数（）{
$（“#A2W”）。单击（函数（）{
$（“#loadContent”）.load（“mainContent.html”）；
});
});

mainContent.html的内容

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["linechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>


load（“可视化”、“1”，{packages:[“linechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'number'，'Sales'）；
data.addColumn（“数字”、“费用”）；
数据。添加行（4）；
数据集值（0,0，'2004'）；
数据设置值（0，1，1000）；
数据设置值（0,2400）；
数据。设定值（1,0，'2005'）；
数据设置值（1,1170）；
数据。设定值（1，2460）；
数据。设定值（2,0，'2006'）；
设置值（2,1860）；
数据设置值（2,2580）；
数据集值（3,0，'2007'）；
数据。设定值（3，1，1030）；
数据设置值（3,2540）；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
绘制图表（数据，{宽度：400，高度：240，图例：“底部”，标题：“公司绩效”）；
}

试图将整个HTML页面填充到已经是HTML页面一部分的div中，会导致灾难。最后，浏览器将尝试解决如何处理所有位于错误位置的内容。以刚插入的元素为例，它是否应该尝试向上移动？它不能呆在原地，因为这毫无意义。如果将其移动到原始元素下，是否应替换现有元素

那它已经有了一个；它应该扔掉它吗？啊，但它不能，因为它扔掉了里面的

我只想说，当你做这样的事情时，浏览器的行为完全没有定义，它可能只是绝望地举手，什么也不做。

你能发布链接让我们看到并尝试调试吗？：）刚刚编辑了我的问题，加入了一些代码..哇。。这是非常有见地的。。。没有考虑所有这些方面。我理解你的意思，所以我必须仔细考虑不同代码片段的位置，以便更符合逻辑。。这方面还有其他的建议吗？以前有人这样做过吗？（我肯定我不是第一个）