PrimeFaces中的BarChart Graphic未显示JSF 2.2 [英] BarChart Graphic in PrimeFaces are not Displayed JSF 2.2
本文介绍了PrimeFaces中的BarChart Graphic未显示JSF 2.2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用primefaces 4.0，我正在尝试做一个条形图，代码编译没有错误，但图表没有显示在生成页面中。
i am using primefaces 4.0 and i am trying to do a Bar-chart, the code compile without error but the chart is not showing in the generate page.
Managed Bean：
Managed Bean:
package per.vmonsanto.controladores;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;
@ManagedBean
@SessionScoped
public class DashBoardBean {
private CartesianChartModel categoryModel;
/**
* Creates a new instance of DashBoardBean
*/
public DashBoardBean() {
createCategoryModel();
}
public CartesianChartModel getCategoryModel() {
return categoryModel;
}
private void createCategoryModel() {
categoryModel = new CartesianChartModel();
ChartSeries from = new ChartSeries();
from.setLabel("Formularios");
from.set("2010", 256);
from.set("2011", 264);
from.set("2012", 345);
from.set("2013", 334);
from.set("2014", 143);
ChartSeries users = new ChartSeries();
users.setLabel("Usuarios");
users.set("2010", 288);
users.set("2011", 326);
users.set("2012", 318);
users.set("2013", 345);
users.set("2014", 290);
categoryModel.addSeries(users);
categoryModel.addSeries(from);
}
}
这是xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="tittle"> Pagina Principal</ui:define>
<h:body>
<ui:composition template="resources/template/masterLayout.xhtml">
<ui:define name="menu">
<ul class="section menu">
<li><a class="menuitem">Menu 1</a>
<ul class="submenu">
<li><a>Submenu 1</a> </li>
<li><a>Submenu 2</a> </li>
</ul>
</li>
</ul>
</ui:define>
<ui:define name="main">
<div class="grid_10">
<div class="box round first">
<h2>Grafico</h2>
<div class="block">
<p:barChart id="basic" value="#{dashBoardBean.categoryModel}" legendPosition="ne"
title="Formulario/Usuario" min="0" max="200" style="height:300px"/>
</div>
</div>
<div class="box round">
<h2>
Estadisticas</h2>
<div class="block">
<div class="stat-col">
<span>Formularios Creados</span>
<p class="purple">
70</p>
</div>
<div class="stat-col">
<span>Formularios Digitados</span>
<p class="yellow">
32,729</p>
</div>
<div class="stat-col">
<span>Formularios Por Dia</span>
<p class="green">
1669</p>
</div>
<div class="stat-col">
<span>Usuarios</span>
<p class="blue">
438</p>
</div>
<div class="stat-col">
<span>Usuarios Activos</span>
<p class="red">
228</p>
</div>
<div class="stat-col">
<span>Formulario/Usuario</span>
<p class="purple">
<img src="img/icon-direction.png" alt="" /> 234</p>
</div>
<div class="stat-col last">
<span>Total</span>
<p class="darkblue">
70,000</p>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
这是生成源的相关部分
HEAD：
<link type="text/css" rel="stylesheet" href="/WebMultiFormBackend/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/WebMultiFormBackend/faces/javax.faces.resource/charts/charts.css?ln=primefaces&v=4.0" /><script type="text/javascript" src="/WebMultiFormBackend/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/WebMultiFormBackend/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0"></script><script type="text/javascript" src="/WebMultiFormBackend/faces/javax.faces.resource/charts/charts.js?ln=primefaces&v=4.0"></script>
图表部分：
<div class="block"><div id="basic" style="height:300px"></div><script id="basic_s" type="text/javascript">$(function(){PrimeFaces.cw('BarChart','widget_basic',{id:'basic',data:[[288,326,318,345,290],[256,264,345,334,143]],categories:['2010','2011','2012','2013','2014'],title:'Formulario\/Usuario',legendPosition:'ne',axes:{xaxis:{label:'',angle:0},yaxis:{label:'',angle:0}},series:[{label:'Usuarios'},{label:'Formularios'}],orientation:'vertical',barPadding:8,barMargin:10,datatip:true,min:0.0,max:200.0},'charts');});</script>
</div>
推荐答案
尝试更改xmlns并在div中放入一个primefaces面板。我认为这是一个错误。
Try to change the xmlns and put inside div a primefaces panel. I think this is a bug.
例如，试试这个。这对我有用。
For instance, try this. It's work to me.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
</h:head>
<h:body>
<div>
<p:panel>
<p:barChart id="basic" value="#{dashBoardBean.categoryModel}" legendPosition="ne"
title="FormularioUsuario" min="0" max="200" style="height:300px"/>
</p:panel>
</div>
</h:body>
</html>
这篇关于PrimeFaces中的BarChart Graphic未显示JSF 2.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
