tabs - 在AJAX控制工具包选项卡控件中,Google可以视化

  显示原文与译文双语对照的内容
79 4

在 ASP.NET AJAX工具箱选项卡控件中,我正在尝试使用google可以视化的列图,但是我有很少的( 字面上) 问题。

If loads页面加载时,如果将可视化添加到选项卡,但当我单击另一个选项卡并重新加载该控件时,显示的控件将显示为正确,但它的大小很小,但不使用。

下面是 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>
时间:原作者:0个回答

111 2

好,我没有收到这篇文章的一个响应,因这里我是如何解决问题的,希望它能帮助人们。

我从未得到这个问题的root,但是我发现如果我延迟了Visualisations的加载,那么这个问题就会消失。

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

在 postback 中,活动选项卡可以以更改,如果当前活动选项卡是包含可以视化的,那么我有一个JavaScript函数。

原作者:
...