Google визуализация мала внутри AJAX Control Toolkit Tab Control - PullRequest
Новая
       23

Google визуализация мала внутри AJAX Control Toolkit Tab Control

0 голосов
/ 25 февраля 2010

Я пытаюсь использовать визуализацию Google, столбчатую диаграмму внутри элемента управления вкладкой AJAX Toolpit asp.net, но у меня небольшие (буквально) проблемы.

Если я добавлю визуализацию на вкладку, которая отображается по умолчанию при загрузке страницы, гистограмма отображается правильно, однако, если я добавлю этот же элемент управления на другую вкладку и перезагрузлю страницу, когда я нажму на другую вкладку, элемент управления отображается, но его крошечный и непригодный для использования .

Вот код для страницы 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>

1 Ответ

0 голосов
/ 26 марта 2010

Хорошо, я не получил ни одного ответа на этот пост, так что вот как я обошел проблему, надеюсь, она кому-нибудь поможет.

На самом деле я никогда не получал корень этой проблемы, но обнаружил, что если я отложил загрузку визуализаций до тех пор, пока не будет нажата вкладка, на которой она содержится, проблема исчезнет.

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

 }

Во время обратной передачи активная вкладка может измениться, чтобы справиться с этим, у меня есть функция JavaScript, которая выполняется при загрузке страницы, если текущая активная вкладка содержит визуализацию, тогда я загружаю ее.

...