1

モーダル ポップアップに Google チャートを表示しようとしています。通常のページでは問題なく動作しますが、モーダルには表示されません。

これは私が使用しているコードです。何が問題なのかわかりません。

これは、URL /polls/ に存在する HTML および JS コードです。

<!--Div that will hold the pie chart-->
<h3 style="text-align:center;">Test</h3>
<hr>
<div id="chart_div" style="height: 500px;">
</div>
<!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Options', 'Votes'],
        ['1',     11],

        ['2',      2],

        ['3',  2],

        ['4', 2],

        ['5',    7],

        ['6',    21],
      ]);

      // Set chart options
      var options = {
                      'backgroundColor': 'transparent',
                      'is3D': 'True',
                      'legend':'bottom',
                      'width':'100%',
                      'height':'100%',
                      chartArea:{left:0,top:0,width:"100%",height:"80%"}
                    };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>

これは、ページ /home/ にある html ボタンです。

<a class="open-newmodal" href="/poll/">show poll</a>

つまり、モーダルと jquery の .load() 関数を使用して、作成したモーダルの /poll/ ページにあるチャートを /home/ ページにロードできるはずです。

これは私が使用しているモーダルです

モーダルCSS

.newmodal-container {
    display: none;
    overflow-y: scroll;
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
.newmodal {
    min-height: 100%;
    height: auto;
    width: 60%;
    margin: 0px auto;
    background-color: white;
    padding: 20px;
    border:1px solid #D3D3D3;
    box-shadow: 0px 0px 5px #D3D3D3;
}
.dp-none {
  display: none !important;
}
.dp-block {
  display: block !important;
}

モーダル JS

// New Modal
var body = $('body'),
main = $('.main'),
open_modal = $('.open-newmodal'),
close_modal = $('.close-newmodal'),
modal_container = $('.newmodal-container');
open_modal.live('click', function(event){
  event.preventDefault();
  body.addClass('body-locked');
  modal_container.addClass('dp-block');
  var href = $(this).attr('href');
  modal = $('.data-load');
  modal.load(href);
  modal.attr("title",href);
});
close_modal.live('click', function(event){
  event.preventDefault();
  body.removeClass('body-locked');
  modal_container.removeClass('dp-block');
  modal.empty();
});
$(document).keyup(function(e) {
  if (e.keyCode == 27){
    event.preventDefault();
    body.removeClass('body-locked');
    modal_container.removeClass('dp-block');
    modal.empty();
  }
});
4

4 に答える 4

0

さて、別のページをモーダルグラフとしてロードする方法を見て、次の解決策があります。

http://jsbin.com/abucet/3のように親ページで Googleライブラリを初期化し、親ページにロードされているライブラリを子ページで再初期化または再インクルードしないようにします。子を参照してください。 @ http://jsbin.com/apherol/5/edit

つまり、基本的には子ページ @ http://jsbin.com/ajerol/5 親ページにアクセスする子 @ http://jsbin.com/abucet/3

親ページ

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>


  <div id='headerDiv' style='background-color:#FF0000'>
      Test Load
  </div>

  <div id='modalDiv' style='background-color:#FFAA00'>
      Close this and click the button to load 

      Graph will be in a modal JQuery Dialog.  Some of the google visualization initialization will be done in this page, not the page we're loading.
  </div>

  <button id='getIt'>Get the Graph</button>


</body>
</html>

Javascript

$('#getIt').click( function() {
      $.get( "http://jsbin.com/ajerol/4",
        function(data) {
             var newGraph= "<div id='graphModal'>"+data+"</div>";
             //clean up html
             newGraph.replace('<body>','');
             newGraph.replace('</body>','');
             // we have the libs on this page, no need for that other cruft       
          newGraph.replace('<head.*head>','');
          // debug: 
          //alert(newGraph);
            // append to the current modal
            $('body').append(newGraph);            
            //  the graph page in modal 
            $('#graphModal').dialog({modal:true,width:300});
            $('#getIt').parent().append('<button onclick="$(\'#graphModal\'\).dialog(\);">showGraph</button>');
        }
      );
});

// initial note
$('#modalDiv').dialog({modal:true});

// load this on the parent page, not the one we're calling
google.load("visualization", "1", {packages:["corechart"]});

子ページ

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }





    </script>

<div id="modal_chart" class="modal">
  <!--Div that will hold the pie chart-->
  <div id="chart_div" style="height: 300px; width: 300px;">
  </div>
</div>

子 Javascript (ロード時)

drawChart();
于 2013-01-12T02:56:49.860 に答える
0

チャートを読み込んでからモーダル コードを適用する際に、明示的な問題があるべきではないと思います。あなたが言及したいくつかの CSS と JQueryUI の代替http://jsbin.com/agerol/3を使用した例を次に示します (ここでコードを積極的に編集することもできますhttp://jsbin.com/agerol/3/edit )。

<!DOCTYPE html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }


    function displayModal() {
      $("#modal_chart").show();
    }

    function hideModal() {
      $("#modal_chart").hide();
    }

    function makeModal() {
      $("#modal_chart").addClass('newmodal-container');
      modal_container = $('.newmodal-container');
      $("#modal_chart").show();

    }

    function jqueryModal() {
      $("#modal_chart").dialog({ modal: true });
    }





    </script>
  </head>
  <body>

    <button onclick="displayModal()">Show Chart </button>
    <button onclick="hideModal()">Hide Chart </button>
    <button onclick="makeModal()">Attach modal CSS </button>
    <button onclick="jqueryModal()">jQuery modal </button>



<div id="modal_chart" class="modal">
  <!--Div that will hold the pie chart-->
  <h3 style="text-align:center;">Test</h3>
  <hr>
  <div id="chart_div" style="height: 300px; width: 300px;">
  </div>
</div>

  </body>

コードに関する 1 つの質問ですが、html をロードする前に次のコードを呼び出していますか?

open_modal = $('.open-newmodal'),
close_modal = $('.close-newmodal'),
modal_container = $('.newmodal-container');
于 2013-01-10T08:34:04.563 に答える
0

私のコメントの意味を少し説明するコードを次に示します。

基本的に、ボタンをクリックしてグラフを表示すると、円グラフの読み込みが行われます。

これがあなたを正しい軌道に乗せることを願っています。

<button onclick="displayModal">Show Chart <\button>

<div id="modal_chart" class="modal">
  <!--Div that will hold the pie chart-->
  <h3 style="text-align:center;">Test</h3>
  <hr>
  <div id="chart_div" style="height: 500px;">
  </div>
</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

function displayModal() {
    $("#modal_chart").fadeIn(fast, function() {
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
    });
}

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Options', 'Votes'],
    ['1',     11],

    ['2',      2],

    ['3',  2],

    ['4', 2],

    ['5',    7],

    ['6',    21],
  ]);

  // Set chart options
  var options = {
                  'backgroundColor': 'transparent',
                  'is3D': 'True',
                  'legend':'bottom',
                  'width':'100%',
                  'height':'100%',
                  chartArea:{left:0,top:0,width:"100%",height:"80%"}
                };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

于 2013-01-03T22:52:41.707 に答える