如何将谷歌可视化图表加载到div？

我在这里有这种情况.. 我正在使用jquery垂直选项卡与每个选项卡中的一些链接。单击链接时，菜单的显示区域必须隐藏，必须使用Google可视化图表加载div。但我无法加载它们。是否有任何方法可以将google图表动态加载到div中。如何将谷歌可视化图表加载到div？

这里是标记

<!doctype html> 
    <html lang="en-US"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="Content-Type" content="text/html"> 
     <title>Title</title> 

     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
     <script type='text/javascript' src='https://www.google.com/jsapi'></script> 


    </head> 

    <body> 
     <div id="w" class="clearfix"> 
     <ul id="sidemenu"> 
      <li> 
      <a href="#home-content" class="open"><img src="images/img_Logo_128.jpg"/></a> 
      </li> 

      <li> 
      <a href="#about-content"><img src="images/img2.png"/></a> 
      </li> 


     </ul> 

     <div id="content"> 
      <div id="home-content" class="contentblock"> 
       <h1>The Main Page!</h1> 
       <p><a href="#" data-page="components/userstats.html" >Sample Page 1</a></p> 

      <p><a href="#" data-page="components/component2.html" >Sample page 2</a></p> 

       <p><a href="#" data-page="components/component3.html" >Sample page 3</a></p> 

       <p><a href="#" data-page="components/component4.html" >Sample page 4</a></p> 
      </div><!-- @end #home-content --> 


      <div id="about-content" class="contentblock hidden"> 
       <h1>About Page</h1> 
       <p><a href="#" data-page="components/component1.html" >Sample page 1</a></p> 

      <p><a href="#" data-page="components/component2.html" >Sample page 2</a></p> 

       <p><a href="#" data-page="components/component3.html" >Sample page 3</a></p> 

       <p><a href="#" data-page="components/component4.html" >Sample page 4</a></p> 
      </div><!-- @end #about-content --> 


     </div><!-- @end #content --> 
     <div class="componentContent"> 

     </div> 
     </div><!-- @end #w --> 

    <script type="text/javascript"> 
    $(function(){ 
     $('#sidemenu a').on('click', function(e){ 
     e.preventDefault(); 

     $(".componentContent").css("display","none"); 
     $("#content").css("display","block"); 
     if($(this).hasClass('open')) { 
      // do nothing because the link is already open 
     } else { 
      var oldcontent = $('#sidemenu a.open').attr('href'); 
      var newcontent = $(this).attr('href'); 

      $(oldcontent).fadeOut('fast', function(){ 
      $(newcontent).fadeIn().removeClass('hidden'); 
      $(oldcontent).addClass('hidden'); 
      }); 


      $('#sidemenu a').removeClass('open'); 
      $(this).addClass('open'); 
     } 
     }); 
     }); 
      $("#content a").on('click',function(e){ 
       e.preventDefault(); 

      $("#content").css("display","none"); 
      $(".componentContent").load($(this).attr("data-page")); 
      $(".componentContent").css("display","block"); 
      return false; 



    }) 
    }) --> 

</script> 
</body> 
</html>

和谷歌图表页面的标记是组件/ userstats.html是

 <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 

    google.load('visualization', '1', 
    packages:['corechart']}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ['hour', 'New Users', 'Active Users'], 
     ['1', 2805, 10035 ], 
     ['2', 3013, 10355 ], 
     ['3', 3025, 10109 ], 
     ['4', 2634, 9047 ], 
     ['5', 2188, 7317 ], 
     ['6', 1934, 5570 ], 
     ['7', 1622, 4077 ], 
     ]); 
     var options = 
     { 
     "users-usa":{ 
     "title": "usa User Statistics" 
     }, 
     "users-eu":{ 
     "title": "eu User Statistics" 
     }, 
     "users-asia":{ 
     "title": "asia User Statistics" 
     } 
     } 
     for(var key in options){ 
     var chart = new google.visualization.LineChart 
     (document.getElementById(key)); 
     chart.draw(data, options[key]); 
     } 
    } 

</script> 

<div id='users-usa' style='width: 900px; height: 300px;'></div> 
<div id='users-eu' style='width: 900px; height: 300px;'></div> 
<div id='users-asia' style='width: 900px; height: 300px;'></div>

现在我需要用类div来加载这个页面。组件内容

来源

2014-04-09 Pawan Kalyan

通常，当您想要在div中加载页面时，您需要使用iframe。 –

这里有错字'packages：['corechart']}）;'。 ''缺少。 –

感谢igor米拉..解决它使用iframe –

当您需要将html页面嵌入到文档中时，您可能会尝试使用标记，因为它通常是要走的路。

从w3c文档：

的标签指定嵌入式框架。

嵌入式框架用于在当前的 HTML文档中嵌入另一个文档。

来源

2014-04-09 11:50:42

如何将谷歌可视化图表加载到div？

回答

相关问题