在AJAX控件工具包选项卡控件中，Google可视化功能很小 [英] Google visualization is small inside AJAX Control Toolkit Tab Control
问题描述
我试图在asp.net AJAX工具包选项卡控件中使用谷歌可视化，列图，但是我的问题很小（字面意思）。
如果我将该图表添加到页面加载时默认显示的选项卡中，但条形图正确显示，但是，如果我将相同的控件添加到另一个选项卡并且重新加载页面，当我点击另一个标签时，显示控件，但它的微小且不可用。
下面是一些代码test.aspx页面，说明问题：
<％@ Page Language =vbAutoEventWireup =falseCodeBehind = Default.aspx.vbInherits =TestProject._Default％>
<％@ Register Assembly =AjaxControlToolkitNamespace =AjaxControlToolkitTagPrefix =cc1％>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head id =Head1runat =server>
< title>< / title>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['columnchart']}）;
< / script>
< script type =text / javascript>
函数drawVisualization（）{
//创建并填充数据表。
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）;
//创建并绘制可视化图。
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 =form1runat =server>
< asp：ScriptManager ID =ScriptManager1runat =server>
< / asp：ScriptManager>
< div>
< cc1：TabContainer ID =TabContainer1runat =server>
< div id =visualization1style =width：300px; height：300px;>
< / div>
< / ContentTemplate>
< / cc1：TabPanel>
< cc1：TabPanel runat =serverHeaderText =TabPanel1ID =TabPanel2>
< ContentTemplate>
< div id =visualization2style =width：300px; height：300px;>
< / div>
< / ContentTemplate>
< / cc1：TabPanel>
< / cc1：TabContainer>
< / div>
< / form>
< / body>
< / html>
好的，我没有收到任何回复这篇文章所以这里是我如何解决这个问题，希望它可以帮助别人。
我从来没有真正得到这个问题的根源，但我发现如果我推迟了加载Visualisations直到包含它的标签被点击，然后问题消失。
在TabControl中，我调用一个JavaScript函数在点击时加载标签可视化：
< cc1：TabContainer ID =TabContainer1runat =serverOnClientActiveTabChanged =tabChanged>
< div id =visualization1style =width：300px; height：300px;>< / div>
< / ContentTemplate>
< / cc1：TabPanel>
< cc1：TabPanel runat =serverHeaderText =TabPanel1ID =TabPanel2>
< ContentTemplate>
< div id =visualization2style =width：300px; height：300px;>< / div>
< / ContentTemplate>
< / cc1：TabPanel>
< / cc1：TabContainer>
JavaScript函数
函数tabChanged（sender，args）{
var ActiveTab = sender.get_activeTabIndex（）;
if（sender.get_activeTabIndex（）== 0）{
if（tab0Loaded！= true）{
//载入可视化
new google.visualization.ColumnChart（document。 getElementById（'visualization2'））。draw（data，null）;
tab0Loaded = true
}
}
if（sender.get_activeTabIndex（）== 1）{
if（tab1Loaded！= true）{
/ /加载可视化
new google.visualization.ColumnChart（document.getElementById（'visualization2'））。draw（data，null）;
tab1Loaded = true
}
}
}
在回发过程中，活动标签可能会发生变化，以应对此问题我有一个JavaScript函数，当页面加载时执行，如果当前活动标签是包含可视化文件的标签，那么我加载它。
I'm trying to use a google visualisation, the column chart, inside an asp.net AJAX Toolkit Tab Control, but I'm having small (literally) problems.
If I add the visualisation to the tab that's displayed by default when the page loads, the bar chart displays correctly, however, if I add the same control to another tab and reload the page, when I click on the other tab, the control is displayed, but its tiny and unusable.
Here's some code for a test.aspx page that illustrates the problem:
<%@ 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>
Ok, I didn't get a single response to this post so here is how I worked around the problem, hope it helps someone.
I never actually got the the root of this problem but I found that if I delayed the loading of the Visualisations till the tab that contains it is clicked then the problem goes away.
In the TabControl I call a JavaScript function to load the tabs visualisation when clicked:
<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>
The JavaScript function
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
}
}
}
During postback the active tab could change, to cope with this I have a JavaScript function that executes when the page loads, if the current active tab is one containing a visualisation then I load it.
这篇关于在AJAX控件工具包选项卡控件中，Google可视化功能很小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
