我正在尝试在 asp AJAX Toolkit Tab Control 中使用 google 可视化、柱形图，但我遇到了一些小(字面意思)问题.
如果我将可视化添加到页面加载时默认显示的选项卡，条形图会正确显示，但是，如果我将相同的控件添加到另一个选项卡并重新加载页面，当我单击另一个选项卡时，控件已显示，但它很小且无法使用.
以下是说明问题的 test.aspx 页面的一些代码:
<html xmlns="www.w3/1999/xhtml"><head id="Head1" runat="server"><title></title><script type="text/javascript" src="www.google/jsapi"></script><script type="text/javascript">google.load('visualization', '1', {包:['columnchart'] });</script><script type="text/javascript">函数 drawVisualization() {//创建并填充数据表.var data = new google.visualization.DataTable();data.addColumn('string', 'Name');data.addColumn('数字', '高度');数据.addRows(3);data.setCell(0, 0, '童宁亩');data.setCell(1, 0, '黄昂发');data.setCell(2, 0, '腾努');data.setCell(0, 1, 174);data.setCell(1, 1, 523);data.setCell(2, 1, 86);//创建并绘制可视化.新的 google.visualization.ColumnChart(document.getElementById('visualization1')).绘制(数据，空)；新的 google.visualization.ColumnChart(document.getElementById('visualization2')).绘制(数据，空)；}google.setOnLoadCallback(drawVisualization);</script><身体><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"><内容模板><div id="visualization1" style="width: 300px; height: 300px;"></内容模板></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2"><内容模板><div id="visualization2" style="width: 300px; height: 300px;">
</内容模板></cc1:TabPanel></cc1:TabContainer>
</表单>
解决方案好的，我没有收到对这篇文章的单一回复，所以这里是我解决这个问题的方法，希望对某人有所帮助.
我从来没有真正了解过这个问题的根源，但我发现如果我将可视化的加载延迟到包含它的选项卡被点击，那么问题就会消失.
在 TabControl 中，我调用 JavaScript 函数以在单击时加载选项卡可视化:
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"><内容模板><div id="visualization1" style="width: 300px; height: 300px;"></div></内容模板></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel2"><内容模板><div id="visualization2" style="width: 300px; height: 300px;"></div></内容模板></cc1:TabPanel></cc1:TabContainer>JavaScript 函数
function tabChanged(sender, args) {var ActiveTab = sender.get_activeTabIndex();如果 (sender.get_activeTabIndex() == 0) {如果(tab0Loaded ！= 真){//加载可视化新的 google.visualization.ColumnChart(document.getElementById('visualization2')).draw(data, null);tab0Loaded = true}}如果 (sender.get_activeTabIndex() == 1) {如果(tab1Loaded ！= true){//加载可视化新的 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 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" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript" src="www.google/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.
更多推荐
Google 可视化在 AJAX Control Toolkit Tab Control 中很小
发布评论