Google 시각화가 AJAX Control Toolkit 탭 컨트롤 내에서 작습니다.

asp.net AJAX Toolkit 탭 컨트롤 내에서 Google 시각화, 세로 막 대형 차트를 사용하려고하는데 작은 문제가 발생했습니다.Google 시각화가 AJAX Control Toolkit 탭 컨트롤 내에서 작습니다.

페이지가로드 될 때 기본적으로 표시되는 탭에 시각화를 추가하면 막대 차트가 올바르게 표시되지만 다른 탭에 동일한 컨트롤을 추가하고 페이지를 다시로드하면 다른 탭을 클릭 할 때 컨트롤이 표시되지만 작고 사용이 불가능한입니다. 여기

이 문제를 설명하는에서 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>

출처

2010-02-25 SausageFingers

확인을, 내가 지금 여기이 게시물에 대한 하나의 응답을 나는이 문제를 해결했다 방법입니다하지 않았다, 그것은 희망 누군가를 돕는다.

나는이 문제의 근본을 결코 알지 못했지만, 시각화가로드 될 때까지로드가 지연되면 클릭하면 문제가 사라진다는 것을 발견했습니다.

이

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

활성 탭이 변경 될 수 있습니다 게시하는 동안 자바 스크립트 기능

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

}

이 난에 대처하기 : 클릭시

이있는 TabControl에서 나는 탭 시각화를로드하는 자바 스크립트 함수를 호출 현재 활성 탭에 시각화가 포함 된 탭이있는 경우 페이지를로드 할 때 실행되는 JavaScript 함수가 있습니다.

출처

2010-03-26 18:14:15 SausageFingers

Google 시각화가 AJAX Control Toolkit 탭 컨트롤 내에서 작습니다.

답변

관련 문제