Google 可视化和 ASP 更新面板答案

【问题标题】：Google Visualization and ASP Update PanelGoogle 可视化和 ASP 更新面板
【发布时间】：2011-11-28 18:41:34
【问题描述】：

我正在尝试通过 google 可视化构建一个组织结构图，该可视化通过使用 ASP 更新面板的 AJAX 调用进行更新。但是，不是在 ajax 更新时刷新图表，而是图表消失了。有人有什么想法吗？谢谢

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

【问题讨论】：

标签： javascript asp.net ajax updatepanel google-visualization

【解决方案1】：

不知道您是否对此仍有疑问，但将来可能对其他人有所帮助。

这显然是一个已知错误，已在 1.1 版中修复你需要做的就是改变

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

到

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

【讨论】：

【解决方案2】：

使用pageLoad() 重新初始化您的脚本，同时将您的jsapi 脚本引用移到UpdatePanel 之外，无需在每次部分回发时重新加载：

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

【讨论】：

脚本实际上是从自定义服务器控件编写的，并且每次更新面板回发时都会更改。如果脚本每次都不一样，它还能工作吗？
UpdatePanel 的 ContentTemplate 标记中的所有内容都会在部分回发时被替换，假设您的页面具有所需的一切，它应该可以正常工作。
pageLoad 未在部分回发时触发。这是有原因的吗？
原因是pageLoad事件在页面前面被覆盖了。还有其他方法吗？
你为什么要覆盖 pageLoad？