谷歌可视化和ASP更新面板

问题描述：

我试图通过谷歌可视化构建组织结构图，通过使用ASP更新面板通过AJAX调用进行更新。然而，图表并没有刷新ajax更新，图表就消失了。任何人有任何想法？由于谷歌可视化和ASP更新面板

<input type="button" id="cmdUpdate" onclick="__doPostBack('panel', '');" value="Update" /> 
<div id="divGChart" runat="server" style="width: 100%; overflow: auto;"> 
    <asp:UpdatePanel id="panel" runat="server" > 
     <ContentTemplate> 
      <div id="chart_div" runat="server" > 
       <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

       <script type="text/javascript"> 
        google.load('visualization', '1', { packages: ['orgchart'] }); 
        google.setOnLoadCallback(drawChart); 
        function drawChart() { 
         var data = new google.visualization.DataTable(); 
         data.addColumn('string', 'Name'); 
         data.addColumn('string', 'Manager'); 
         data.addColumn('string', 'ToolTip'); 
         data.addRows([ 
          [{ v: '10131', f: '10131'}, '', '10131'], 
          [{ v: '10132', f: '10132'}, '10131', '10132'], 
          [{ v: '10133', f: '10133'}, '10131', '10133'], 
          [{ v: '10134', f: '10134'}, '10131', '10134'] 
         ); 
         var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
         chart.draw(data, {allowCollapse: true, allowHtml: true}); 
        }  
       </script> 
      </div> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div>

答

使用pageLoad()重新初始化脚本，也移动UpdatePanel外面你jsapi脚本参考，无需重新加载每个局部回传：

<script type="text/javascript"> 
    function pageLoad() //called on all partial postbacks 
    { 
     google.load('visualization', '1', { packages: ['orgchart'] }); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Name'); 
     data.addColumn('string', 'Manager'); 
     data.addColumn('string', 'ToolTip'); 
     data.addRows([ 
      [{ v: '10131', f: '10131'}, '', '10131'], 
      [{ v: '10132', f: '10132'}, '10131', '10132'], 
      [{ v: '10133', f: '10133'}, '10131', '10133'], 
      [{ v: '10134', f: '10134'}, '10131', '10134'] 
     ); 
     var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
     chart.draw(data, {allowCollapse: true, allowHtml: true}); 
     }  
    } 
</script>

脚本实际上是从一个自定义服务器控件编写每次更新面板发回时都会更改。如果脚本每次都不一样，它会继续工作吗？ – mrK

UpdatePanel的ContentTemplate标签中的所有内容都会在部分回发中被替换，假设您的页面具有它所需的所有内容，则它应该可以正常工作。 –

pageLoad未在部分回传中触发。是否有一个原因？ – mrK

答

不知道如果你仍然有这是一个问题，但它可能对未来的其他人有所帮助。

显然这是一个已知的bug已被固定在1.1版本所有你需要做的是改变

google.load('visualization', '1', { packages: ['orgchart'] });

到

google.load('visualization', '1.1', { packages: ['orgchart'] });

谷歌可视化和ASP更新面板

相关推荐