Question

我正在尝试通过Google可视化构建组织结构图，该图表使用ASP Update面板通过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>

谷歌可视化和ASP更新面板

2 个答案: