14

protovisを使用してグラフを作成する div があります。div にはwidth: 100%andがheight: 100%あり、グラフを作成するコードは$('#chart').width()andを使用し$('#chart').height()て、レンダリング時に div のサイズを取得し、ページをグラフで埋めます。ウィンドウのサイズ変更イベントをキャプチャし、ウィンドウのサイズが変更されたときにサイズが変更されるように、div とグラフを調整します。

今、私は印刷する必要があります。ブラウザがプリンタ用にページをレンダリングしているときにサイズ変更を発行することを望んでいましたが、そうではありません。少なくとも Safari と Firefox はそうではありません。Chrome は、幅ではなく高さのみをサイズ変更するという奇妙なことを行います。印刷の直前にこの動作をトリガーする方法はありますか?

編集。次のhtmlを検討してください

<html>
  <head>
    <title>Resize</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#chart').resize(function() {
          $(this).html('chart size is ' + $('#chart').width() + ' x ' + $('#chart').height());
        })        
      });
      $(window).resize(function() {
        $('.resizable').resize();
      });
    </script>
    <style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
    </style>
  </head>
  <body>

    <div id="chart" class="resizable">
    </div>

  </body>
</html>

ウィンドウのサイズを変更すると、div の内容が変更されます。印刷すると、レンダリング プロセスでサイズ変更イベントが発生しません。

4

2 に答える 2

0

多分

<style type="text/css">
      #chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>

<style type="text/css" media="print">
      #chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
</style>
于 2010-08-21T18:30:36.547 に答える