Fatal编程技术网
  • tabs/
  • Tabs Google visualization是AJAX控件工具箱选项卡控件中的一个小控件

Tabs Google visualization是AJAX控件工具箱选项卡控件中的一个小控件

tabs google-visualization

Tabs Google visualization是AJAX控件工具箱选项卡控件中的一个小控件,tabs,controls,ajaxcontroltoolkit,tabcontrol,google-visualization,Tabs,Controls,Ajaxcontroltoolkit,Tabcontrol,Google Visualization,我试图在asp.NETAJAX工具包选项卡控件中使用google可视化，即柱状图，但我遇到了一些小问题（字面上） 如果我将可视化添加到页面加载时默认显示的选项卡，条形图将正确显示。但是，如果我将同一控件添加到另一个选项卡并重新加载页面，当我单击另一个选项卡时，将显示控件，但其很小且不可用 下面是test.aspx页面的一些代码，说明了问题： <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb"

我试图在asp.NETAJAX工具包选项卡控件中使用google可视化，即柱状图，但我遇到了一些小问题（字面上）

如果我将可视化添加到页面加载时默认显示的选项卡，条形图将正确显示。但是，如果我将同一控件添加到另一个选项卡并重新加载页面，当我单击另一个选项卡时，将显示控件，但其很小且不可用

下面是test.aspx页面的一些代码，说明了问题：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestProject._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['columnchart'] });
    </script>

    <script type="text/javascript">
        function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Height');
            data.addRows(3);
            data.setCell(0, 0, 'Tong Ning mu');
            data.setCell(1, 0, 'Huang Ang fa');
            data.setCell(2, 0, 'Teng nu');
            data.setCell(0, 1, 174);
            data.setCell(1, 1, 523);
            data.setCell(2, 1, 86);

            // Create and draw the visualizations.
            new google.visualization.ColumnChart(document.getElementById('visualization1')).
            draw(data, null);
            new google.visualization.ColumnChart(document.getElementById('visualization2')).
            draw(data, null);
        }
        google.setOnLoadCallback(drawVisualization);
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <cc1:TabContainer ID="TabContainer1" runat="server">
            <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
                <ContentTemplate>
                    <div id="visualization1" style="width: 300px; height: 300px;">
                    </div>
                </ContentTemplate>
            </cc1:TabPanel>
            <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2">
                <ContentTemplate>
                    <div id="visualization2" style="width: 300px; height: 300px;">
                    </div>
                </ContentTemplate>
            </cc1:TabPanel>
        </cc1:TabContainer>
    </div>
    </form>
</body>
</html>


load（'visualization'，'1'，{packages:['columnchart']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Height'）；
数据。添加行（3）；
setCell（0,0，'童宁木'）；
数据集（1,0，'黄昂发'）；
setCell（2,0，'Teng nu'）；
数据集单元（0,1174）；
数据集单元（1,1523）；
数据集单元（2,1,86）；
//创建并绘制可视化效果。
新的google.visualization.ColumnChart（document.getElementById（'visualization1'））。
绘制（数据，空）；
新的google.visualization.ColumnChart（document.getElementById（'visualization2'））。
绘制（数据，空）；
}
setOnLoadCallback（drawVisualization）；
好的，我对这篇文章没有得到任何回应，所以下面是我如何解决这个问题的，希望它能帮助别人

我从来没有真正找到这个问题的根源，但我发现如果我延迟加载可视化，直到包含它的选项卡被单击，那么问题就消失了

在TabControl中，我调用JavaScript函数，在单击时加载选项卡可视化：

<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="tabChanged">
  <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
    <ContentTemplate>
      <div id="visualization1" style="width: 300px; height: 300px;"></div>
    </ContentTemplate>
  </cc1:TabPanel>
    <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2">
      <ContentTemplate>
        <div id="visualization2" style="width: 300px; height: 300px;"></div>
      </ContentTemplate>
  </cc1:TabPanel>
</cc1:TabContainer>
在回发过程中，活动选项卡可能会发生变化，为了应对这种情况，我有一个JavaScript函数，在页面加载时执行，如果当前活动选项卡包含可视化，那么我将加载它

function tabChanged(sender, args) {
        var ActiveTab = sender.get_activeTabIndex();
        if (sender.get_activeTabIndex() == 0) {
            if (tab0Loaded != true) { 
                //load the visualisation
                new google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);
                tab0Loaded = true
            }
        }
        if (sender.get_activeTabIndex() == 1) {
            if (tab1Loaded != true) { 
                //load the visualisation
                new google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);
                tab1Loaded = true
            }
        }

 }