Диаграмма Google не отображается правильно во 2-й / 3-й и т.д. вкладке jquery в asp.net - PullRequest
Новая
       37

Диаграмма Google не отображается правильно во 2-й / 3-й и т.д. вкладке jquery в asp.net

0 голосов
/ 12 февраля 2012

кто-нибудь сталкивался с этой проблемой, прежде чем она должна стать известной ошибкой?

На этом сайте http://jsfiddle.net/G862D/3/ вы можете видеть график, появляющийся на 3-й вкладке, все в порядке с процентами в сегментах круговой диаграммы.

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

Исходный код: 

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'>     </script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <script type='text/javascript' src="http://www.google.com/jsapi?ext.js"></script>    

      <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>



      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">



  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 

google.load('visualization', '1.0', {packages: ['corechart']});
$(document).ready(function() {
    $('#tabs').tabs();

    function drawVisualization() {
      // Create and populate the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task');
      data.addColumn('number', 'Hours per Day');
      data.addRows(5);
      data.setValue(0, 0, 'Work');
      data.setValue(0, 1, 11);
      data.setValue(1, 0, 'Eat');
       data.setValue(1, 1, 2);
      data.setValue(2, 0, 'Commute');
      data.setValue(2, 1, 2);
      data.setValue(3, 0, 'Watch TV');
      data.setValue(3, 1, 2);
      data.setValue(4, 0, 'Sleep');
      data.setValue(4, 1, 7);

      // Create and draw the visualization.
      new google.visualization.PieChart(document.getElementById('chart')).
          draw(
              data,
              // If you uncomment width, height, the chart will be really small.
              {title:"So, how was your day?", width: 400, height: 400});
  }
  google.setOnLoadCallback(drawVisualization);

});

//]]>  

</script>


</head>
<body>
  <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
         <li><a href="#tabs-3">Chart</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
      <div id="chart"></div>
    </div>
</div>

</body>

</html>

Все нормально на первой вкладке, но не на последующих?

Исходный код из браузера: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">



    <script type='text/javascript' src="http://www.google.com/jsapi?ext.js"></script>




    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>



    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">



<style type='text/css'>

</style>



<script type='text/javascript'>//<![CDATA[

    google.load('visualization', '1.0', { packages: ['corechart'] });
    $(document).ready(function () {
        $('#tabs').tabs();

        function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Task');
            data.addColumn('number', 'Hours per Day');
            data.addRows(5);
            data.setValue(0, 0, 'Work');
            data.setValue(0, 1, 11);
            data.setValue(1, 0, 'Eat');
            data.setValue(1, 1, 2);
            data.setValue(2, 0, 'Commute');
            data.setValue(2, 1, 2);
            data.setValue(3, 0, 'Watch TV');
            data.setValue(3, 1, 2);
            data.setValue(4, 0, 'Sleep');
            data.setValue(4, 1, 7);

            // Create and draw the visualization.
            new google.visualization.PieChart(document.getElementById('chart')).
        draw(
            data,
            // If you uncomment width, height, the chart will be really small.
            {title: "So, how was your day?", width: 400, height: 400 });
        }
        google.setOnLoadCallback(drawVisualization);

    });

//]]>  

</script>


</head>
<body>
  <div id="tabs">
   <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Chart</a></li>
    </ul>
     <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
  <div id="chart"></div>
</div>
</div>



</body>


</html>
...