Java 如何通过点击打印按钮来打印google注释图表，就像普通打印一样，通过编程将其另存为pdf？_Java_Javascript_Ajax_Json

Java 如何通过点击打印按钮来打印google注释图表，就像普通打印一样，通过编程将其另存为pdf？

java javascript ajax json

Java 如何通过点击打印按钮来打印google注释图表，就像普通打印一样，通过编程将其另存为pdf？,java,javascript,ajax,json,Java,Javascript,Ajax,Json,如何通过点击网页上的“打印”按钮来打印Google注释图表在我的代码中，我使用了window.print（）方法，但当我打印页面时，图表从网页中消失，其余内容正在打印请帮帮我 <!DOCTYPE html> <html> <head> <title>Google Chart with jsp Mysql Json</title> <meta http-equiv="Content-Typ

如何通过点击网页上的“打印”按钮来打印Google注释图表

在我的代码中，我使用了

window.print（）

方法，但当我打印页面时，图表从网页中消失，其余内容正在打印

请帮帮我

<!DOCTYPE html>    <html>    <head>
       <title>Google Chart with jsp Mysql Json</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><!--
css for datepicker -->
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://www.google.com/jsapi"></script>
       <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!--   
Javascript for datepicker -->
       <script type="text/javascript">
           google.load("visualization", "1", {packages:["corechart"]}); $(document).ready(function(){   
showGoogleChart('2013-12-01','2013-12-31');
//============================= Onpage load calling chart function
$(    "#from" ).datepicker({ changeMonth: true,
dateFormat:'yy-mm-dd',    numberOfMonths: 3, onClose: function(
selectedDate ) { $( "#to"    ).datepicker( "option", "minDate",
selectedDate ); } }); $( "#to"    ).datepicker({
dateFormat:'yy-mm-dd', changeMonth: true,    numberOfMonths: 3,
onClose: function( selectedDate ) { $( "#from"    ).datepicker(
"option", "maxDate", selectedDate ); } }); });   
//==================== OnChange date call google chart   
================== function getChartdate(){ alert("hi"); var startdate = $('#from').val(); var enddate = $('#to').val();   
showGoogleChart(startdate,enddate);   //===========On button click  
calling chart function========= }
       function showGoogleChart(startdate,enddate){    
           var queryObject="";
           var queryObjectLen="";
           var postdata = {"startDate":startdate,"endDate":enddate};
           $.ajax({
               type : 'POST',
               url : 'testPages.jsp',
               data:postdata,
               dataType:'json',
               success : function(data) {
                   queryObject = eval('(' + JSON.stringify(data) + ')');
                   queryObjectLen = queryObject.empdetails.length;

                   google.setOnLoadCallback(drawChart(queryObject,queryObjectLen));
               },
                   error : function(xhr, type) {
                   alert('server error occoured')
               }
           });
       }


           function drawChart(queryObject,queryObjectLen) {
          var data = new google.visualization.DataTable();
               data.addColumn('string', 'date');
               data.addColumn('number', 'temp');
               for(var i=0;i<queryObjectLen;i++)
               {
                   var name = queryObject.empdetails[i].date;
                   var empid = queryObject.empdetails[i].temp;
                   data.addRows([
                       [name,parseInt(empid)]
                   ]);
               }
               var options = {
                   title: 'Employee Information',
               };   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data,options);  }
       </script>
       </head>
       <body>
            <div style="margin: 50px;">
               <label for="from">From</label> <input type="text" id="from" name="from"> <label for="to">to</label> <input type="text"
id="to" name="to"> <input type="button" id="changeChart"   
onclick="getChartdate();" value="Change Chart"/>
           </div>
             <div id="chart_div"></div>
        </body>
       </html>


使用jsp-Mysql-Json的Google图表
load（“可视化”、“1”、{packages:[“corechart”]}）$（文档）.ready（函数（）{
显示谷歌图表（“2013-12-01”、“2013-12-31”）；
//=================================================打开页面加载调用图表功能
$（“#from”）.datepicker（{changeMonth:true，
dateFormat:'yy-mm-dd'，numberOfMonths:3，onClose:function(
selectedDate）{$（“#to”）.datepicker（“选项”，“minDate”，
selectedDate）；}}}；$（“#to”）.datepicker({
dateFormat:'yy-mm-dd'，changeMonth:true，numberOfMonths:3，
onClose:function（selectedDate）{$（“#from”）.datepicker(
“选项”、“maxDate”、selectedDate）；}}}}）；
//=======================================一旦更改日期，请致电谷歌图表
============函数getChartdate（）{alert（“hi”）；var startdate=$（'#from'）.val（）；var enddate=$（'#to'）.val（）；
showGoogleChart（开始日期、结束日期）；//==========单击按钮
调用图表函数========}
函数showGoogleChart（开始日期，结束日期）{
var queryObject=“”；
var queryObjectLen=“”；
var postdata={“startDate”：startDate，“endDate”：endDate}；
$.ajax({
键入：“POST”，
url:'testPages.jsp'，
数据：postdata，
数据类型：'json'，
成功：功能（数据）{
queryObject=eval（'（'+JSON.stringify（data）+'）；
queryObject=queryObject.empdetails.length；
setOnLoadCallback（drawChart（queryObject，queryObject））；
},
错误：函数（xhr，类型）{
警报（'occoured'服务器错误）
}
});
}
函数绘图图（查询对象，查询对象）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'date'）；
data.addColumn（'number'，'temp'）；
对于（var i=0；i方法window print（）
将只打开打印对话框。页面的打印格式取决于浏览器如何格式化网页和打印样式表（如果存在）
假设图表是某种图像（或画布），则可能是浏览器在打印时选择剥离图像。特别是如果使用css背景图像：url（…）
添加图像，因为它假设背景图像（如背景色）仅用于装饰，并且在打印时会浪费墨水
普通的img
标签应该打印，但在大多数情况下，除非某些css将其删除以便打印…
您需要添加更多信息。（代码示例等）如果你想要一个更具体的答案。我主要关心的是，我有一个网页，在其中我从谷歌端获取谷歌注释图表。在同一个页面中，我向用户提供了一个打印按钮选项，但当我点击该按钮时，打印窗口弹出，但谷歌图表没有出现，页面的其余部分保持原样并进入print，但我希望完整的网页与图表一起打印。我正在使用window.print（）方法，我认为图表是svg或flash格式的。请帮忙，我想把它交给我的客户。谢谢你的快速回复Stein G StrindhaugDo你有一个带有此代码的公共测试服务器吗？或者你能在JSFIDLE中重现这个问题吗：？Google图表开发人员页面上的图表确实使用Chrome为我打印：是吗对你有用吗？是的，这对我有用，我要做的是向你展示在jsfiddle.net上生成图形的代码。我主要关心的是，我有一个网页，其中我从谷歌端获得了谷歌注释的图表。在同一个页面中，我向用户提供了一个打印按钮选项，但当我单击该按钮时，打印窗口弹出，但谷歌图表不显示，页面的其余部分保持原样并开始打印，但我希望完整的网页与图表一起打印。我正在使用window.print（）方法，我认为图表是svg或flash格式。请帮忙，我想把它交给我的客户。谢谢您的快速回复Stein G Strindhaug