2
Я использую Netbeans 8.0, Primefaces 4.0, Highcharts, Java и XHTML.js кодирование новичка - проблема с переменными и для циклов
В конце концов, я захочу загрузить данные, которые динамически захватываются из базы данных и загружаются в веб-приложение, но сначала мне нужно выяснить, как создать диаграмму, используя цикл for. Пример, который я пытаюсь изменить, - это пример basic line chart в Highcharts.
Мой код выглядит следующим образом:
<!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 в своей родословной. se необходимые компоненты в пределах Компонент формы должен иметь UIForm в своей родословной. Предложение:.. Приложить необходимые компоненты в "
в больших, желтых буквах
Пожалуйста, объясните, что я делаю неправильно у меня есть другая версия этой страницы, которая не использует для цикла, но вместо этого требует данных массивы из бэк-бобов для каждого города - эта версия работает нормально, но я не буду в состоянии сделать это в окончательной реализации, так как все данные должны быть выведены динамически
заранее спасибо
.. Обновление:
Я работаю над этим днем и добился некоторого реального прогресса, но я все еще не совсем там. Редактор 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>
Запуск этот файл делает заголовок, подзаголовок, легенда, горизонтальной и вертикальной оси, а еще не сам сюжет. Любые подсказки?
Не знаю, если это связано с вашим вопросом, но при взгляде на 'р primefaces': menu' [витрина] (http://www.primefaces.org/showcase/ui/menu/menu .xhtml), вы заметите, что он заключен в элемент 'h: form'. Но твой нет. –
в цикле for, у вас есть '<', когда это должно быть < – Yohn
Несвязанный, вы проверили, соответствует ли диаграмма Primefaces вашим потребностям? Его довольно аккуратный для стандартных вещей, хотя я столкнулся с проблемами с логарифмической осью в 4.0. Но он получил капитальный ремонт на 5.0, если вам это нужно: http://www.primefaces.org/showcase/ui/chart/line.xhtml –