我做了一个使用谷歌图表(折线图)的应用程序。如果我在本地的 Tomcat7 实例上运行它,图表会显示在 IE8 中,但在开发服务器中使用 Tomcat7 的实例时,它不适用于 Internet Explorer(没有错误,但没有显示任何内容。使用 Chrome 代替它可以正常工作)。
这里是在本地版本的浏览器中生成的源代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phone Cost System</title>
<link class="component" href="/phoneCostSystem/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf" rel="stylesheet" type="text/css" /><link class="component" href="/phoneCostSystem/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><link class="component" href="/phoneCostSystem/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msg.css.jsf" rel="stylesheet" type="text/css" /><link class="component" href="/phoneCostSystem/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msgs.css.jsf" rel="stylesheet" type="text/css" /><script src="/phoneCostSystem/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.jsf" type="text/javascript"></script><script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script><script src="/phoneCostSystem/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js.jsf" type="text/javascript"></script><link href="css/phoneCostSystem.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(a) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addColumn('number', 'Expenses2');
data.addRows(JSON.parse(a.test));
var options = {
title: 'Company Performance',
pointSize : 2,
interpolateNulls: true
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body onload="submitApplication()">
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<div class="outer">
<!-- START MAIN -->
<div class="content">
<div class="innercontent">
<h4>My Expenses</h4>
<dl id="myError" class="rich-messages errorMessage" style="display: none; "><dt></dt></dl>
<form id="form1" name="form1" method="post" action="/phoneCostSystem/charts.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form1" value="form1" />
<div id="chart_div" style="width: 600px; height: 500px;"></div>
<script id="j_id_jsp_1252683611_4" type="text/javascript">//<![CDATA[
submitApplication=function(){A4J.AJAX.Submit('form1',null,{'oncomplete':function(request,event,data){drawChart(data)},'similarityGroupingId':'j_id_jsp_1252683611_4','parameters':{'j_id_jsp_1252683611_4':'j_id_jsp_1252683611_4'} ,'containerId':'j_id_jsp_1252683611_0'} )};
//]]></script>
<script type="text/javascript">
//example callback function
function processData(data) {
console.log(data);
var temp=JSON.stringify(data);
alert(temp);
}
//call the ajax method from javascript
</script>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id2" />
</form>
<br />
<br />
</div>
</div>
</div>
</body>
</html>
这是我在开发服务器中运行应用程序时生成的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phone Cost System</title>
<link class="component" href="/phoneCostSystem/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf" rel="stylesheet" type="text/css" /><link class="component" href="/phoneCostSystem/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><link class="component" href="/phoneCostSystem/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msg.css.jsf" rel="stylesheet" type="text/css" /><link class="component" href="/phoneCostSystem/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msgs.css.jsf" rel="stylesheet" type="text/css" /><script src="/phoneCostSystem/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.jsf" type="text/javascript"></script><script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script><script src="/phoneCostSystem/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js.jsf" type="text/javascript"></script><link href="css/phoneCostSystem.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(a) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addColumn('number', 'Expenses2');
data.addRows(JSON.parse(a.test));
var options = {
title: 'Company Performance',
pointSize : 2,
interpolateNulls: true
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body onload="submitApplication()">
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<div class="outer">
<!-- START MAIN -->
<div class="content">
<div class="innercontent">
<h4>My Expenses</h4>
<dl id="myError" class="rich-messages errorMessage" style="display: none; "><dt></dt></dl>
<form id="form1" name="form1" method="post" action="/phoneCostSystem/charts.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form1" value="form1" />
<div id="chart_div" style="width: 600px; height: 500px;"></div>
<script id="j_id_jsp_1829848551_4" type="text/javascript">//<![CDATA[
submitApplication=function(){A4J.AJAX.Submit('form1',null,{'oncomplete':function(request,event,data){drawChart(data)},'similarityGroupingId':'j_id_jsp_1829848551_4','parameters':{'j_id_jsp_1829848551_4':'j_id_jsp_1829848551_4'} ,'containerId':'j_id_jsp_1829848551_0'} )};
//]]></script>
<script type="text/javascript">
//example callback function
function processData(data) {
console.log(data);
var temp=JSON.stringify(data);
alert(temp);
}
//call the ajax method from javascript
</script>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id2" />
</form>
<br />
<br />
</div>
</div>
</div>
</body>
</html>
关于可能的根本原因的任何想法?
提前致谢。