谷歌可视化和ASP更新面板

Google Visualization and ASP Update Panel

本文关键字：更新 ASP 可视化 谷歌      更新时间：2023-09-26

我试图通过谷歌可视化，通过AJAX调用使用ASP更新面板更新一个组织结构图。然而，在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>

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

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

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


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

使用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>
相关文章：