1

我正在尝试在模态弹出窗口上显示谷歌图表。它在普通页面上工作得很好，但它不会出现在模态页面上。

这是我正在使用的代码。我不确定出了什么问题。

这是位于 url 上的 HTML 和 JS 代码，/polls/

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

这里有一些代码可以解释我的评论中的一些意思。

基本上，当单击按钮显示图表时，您将加载饼图。

希望这能让你走上正确的道路。

<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 回答
0

我认为加载图表然后应用模态代码不应该有任何明确的问题。这是一个使用您提到的一些 CSS 和 JQueryUI 替代品http://jsbin.com/ajerol/3的示例（您也可以在此处主动编辑代码http://jsbin.com/ajerol/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>

关于您的代码的一个问题，您是否在加载 html 之前调用了以下代码？

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

好的，看到您希望如何将另一个页面加载为模态图，我有以下解决方案。

像在http://jsbin.com/abucet/3中一样在父页面上初始化您的 google lib ，然后确保您的子页面不会重新初始化或重新包含父页面中加载的库，请参阅 child @http ://jsbin.com/ajerol/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

您可以使用来自远程 url 的谷歌图表和如下模式：

在远程 url上，您需要以这种方式加载 google 链接：

enter code here

$.getScript( 
"https://www.google.com/jsapi",
   function() {
    google.load('visualization', '1', {'packages':['corechart'],"callback": drawChart});
 });

为我工作。

于 2015-06-23T08:47:07.937 回答