我正在使用Netbeans 8.0，Primefaces 4.0，Highcharts，Java和XHTML。
最终，我想要加载从数据库中动态获取并加载到Web应用程序的数据，但首先，我需要弄清楚如何使用for循环生成图表。我试图修改的示例是Highcharts上的basic line chart示例。
我的代码如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
Header
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
<p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum" url="http://forum.primefaces.org/" />
<p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
<script language="javascript" type="text/javascript">
// <![CDATA[
function() {
cityArray = #{tokyoBean.cityArr},
tempsArray = #{tokyoBean.cityArrArr},
monthsArray = #{tokyoBean.catArr},
series = []
,
len = cityArray.length;
for (var i = 0; i < len; i++)
{
series.push({
name: [cityArray[i]],
data: [tempsArray[i]]
});
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: - 20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: - 20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
}),
};
// ]]>
</script>
</html>
当我运行文件并查看页面源代码时，代码如下所示：
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>PrimeFaces</title><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=4.0" /><link type="text/css" rel="stylesheet" href="/Demo/faces/javax.faces.resource/layout/layout.css?ln=primefaces&v=4.0" /><script type="text/javascript" src="/Demo/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/Demo/faces/javax.faces.resource/layout/layout.js?ln=primefaces&v=4.0"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script></head><body><script id="j_idt6_s" type="text/javascript">$(function(){PrimeFaces.cw('Layout','widget_j_idt6',{id:'j_idt6',full:true,north:{paneSelector:'#j_idt7',size:'100',resizable:true,closable:true,spacing_open:6,spacing_closed:25},south:{paneSelector:'#j_idt9',size:'100',resizable:false,closable:true,spacing_open:6,spacing_closed:25},west:{paneSelector:'#j_idt11',size:'175',resizable:false,closable:true,spacing_open:6,spacing_closed:25},center:{paneSelector:'#j_idt18',size:'auto',resizable:false,closable:false}},'layout');});</script><div id="j_idt7" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-north"><div class="ui-layout-unit-content ui-widget-content">
Header
</div></div><div id="j_idt9" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-south"><div class="ui-layout-unit-content ui-widget-content">
Footer
</div></div><div id="j_idt11" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Left</span><a href="javascript:void(0)" class="ui-layout-unit-header-icon ui-state-default ui-corner-all" title="Collapse"><span class="ui-icon ui-icon-triangle-1-w"></span></a></div><div class="ui-layout-unit-content ui-widget-content"><div id="j_idt12" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix" role="menu"><div tabindex="0" class="ui-helper-hidden-accessible"></div><ul class="ui-menu-list ui-helper-reset"><li class="ui-widget-header ui-corner-all"><h3>Resources</h3></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/showcase-labs/ui/home.jsf"><span class="ui-menuitem-text">Demo</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/documentation.html"><span class="ui-menuitem-text">Documentation</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://forum.primefaces.org/"><span class="ui-menuitem-text">Forum</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/themes.html"><span class="ui-menuitem-text">Themes</span></a></li></ul></div><script id="j_idt12_s" type="text/javascript">$(function(){PrimeFaces.cw('PlainMenu','widget_j_idt12',{id:'j_idt12'});});</script></div></div><div id="j_idt18" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div></div></div><ul id="javax_faces_developmentstage_messages" title="Project Stage[Development]: Unhandled Messages"><li style="Color: orange"><span> The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form> </span></li><li style="Color: orange"><span> The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form> </span></li></ul></body>
<script language="javascript" type="text/javascript">
// <![CDATA[
function() {
cityArray = ['Tokyo', 'New York', 'Berlin', 'London'],
tempsArray = [[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 6.6]],
monthsArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
series = []
,
len = cityArray.length;
for (var i = 0; i < len; i++)
{
series.push({
name: [cityArray[i]],
data: [tempsArray[i]]
});
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: - 20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: - 20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
}),
};
// ]]>
</script>
</html>
我无法发布我的页面看起来像什么，但它几乎完全是空白的，除了 在底部它说：
“表单组件需要在其祖先中具有UIForm。建议：将必要的组件包含在其中 表单组件需要在其祖先中具有UIForm。建议：将必要的组件包含在“
中用大而黄的字母。
请解释我做错了什么。我有这个页面的另一个版本，不使用for循环，而是从每个城市的支持bean调用数据数组 - 该版本工作正常，但我将无法在最终实现中执行此操作，因为所有数据将必须动态拉动。
提前致谢。
更新
我整个下午一直在努力工作并取得了一些进展，但我仍然没有那么做。 Netbeans编辑器不允许像我尝试使用它一样格式化series.push（）方法，而且，我必须在不同的代码行上声明和定义变量以使它们坚持下去，可以这么说。我删除了我的jquery脚本源（它删除了黄色警告消息），我的代码现在看起来像这样：
//html code redacted as it is working
<script>
$(function() {
cityArray = new Array();
cityArray = #{tokyoBean.cityArr};
monthsArray = new Array();
monthsArray = #{tokyoBean.catArr};
tempsArray = new Array();
tempsArray = #{tokyoBean.cityArrArr};
len = cityArray.length;
series = new Array();
for(i=0; i < len; i++) {
series.push("{ <br /> name: "+[cityArray[i]]+", <br /> data: "+[tempsArray[i]]+" <br /> } ");
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
});
</script>
现在运行此文件会渲染标题，副标题，图例，水平和垂直轴，但仍然不是绘图本身。有线索吗？
答案 0 :(得分：1)
首先，我要感谢所有提出建议的人。我玩代码，最后让它工作。万一有人再次遇到这个问题，这就是我最终的xhtml和js代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
Header
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
<p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum" url="http://forum.primefaces.org/" />
<p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
<script>
$(function() {
cityArray = new Array();
cityArray = #{tokyoBean.cityArr};
monthsArray = new Array();
monthsArray = #{tokyoBean.catArr};
tempsArray = new Array();
tempsArray = #{tokyoBean.cityArrArr};
len = cityArray.length;
series = new Array();
for(i=0; i < len; i++) {
var arrayElement = tempsArray[i],
cityElement = cityArray[i];
series.push({
name: cityElement,
data: arrayElement
});
}
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: monthsArray
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: series
});
});
</script>
</html>