Google 可视化和 ASP 更新面板

Question

我正在尝试通过 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>

Answer 1

不知道您是否仍然遇到问题，但这可能对其将来的其他人有帮助。

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

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

为

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

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