LineChart不渲染为Primefaces 5.0 [英] LineChart not rendering for Primefaces 5.0
问题描述
我最近升级到Primefaces 5.0，正在转换我的图表，以适应5.0的新图表API，当我遇到一个相当恼人的问题，其中一个我的线图表只拒绝渲染在这一个特定的页面。
I recently upgraded to Primefaces 5.0 and was in the process of converting my charts to accommodate the new chart api in 5.0 when I came across a rather annoying problem where one of my Line Charts only refuses to render on this one specific page.
更具体来说：
一个LineChart我不能在一个特定的页面上工作。
A LineChart I have does not work on a specific page.
如果放在另一个页面，图表工作。
If put on another page, the chart works.
如果放在特定页面上，而不是与其他所有内容一起删除，它仍然无法正常工作。
If put on the specific page where it was not working with all the other content deleted, it still does not work.
如果图表放在特定页面和任何其他页面上，则两个页面上的图表都可以工作...
If the chart is placed on the specific page AND any other page, the charts on both pages will work...
- 不工作我的意思是，不是正常出现，大约图表的大小的空白显示在页面上。此外，导航到这个破碎图表的视图阻止我切换到其他页面，几乎就像一切都冻结。
-By not working I mean that instead of appearing normally, a blank space roughly the size of the chart appears on the page. Additionally, navigating to a view with this broken chart prevents me from switching to other pages, almost as if everything freezes.
我100％确定我的bean不会导致问题，因为我能够成功创建图表，而不是在特定页面上。
I am 100% sure my beans are not causing the problem because I was able to create the chart successfully, not not on the specific page.
我一直在试图找出问题超过10个小时无法使用。希望有人能弄清楚什么是错的。
I have been trying to figure out the problem for well over 10 hours to no avail. Hopefully someone can figure out what is wrong.
index.xhtml：
index.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Arbitrage Online: Member's Area</title>
<h:outputStylesheet library="css" name="layout.css"/>
<h:outputScript library="js" name="functions.js"/>
</h:head>
<h:body id="body" styleClass="body">
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit position="north" size="60" gutter="0" styleClass="headerArea">
<ui:include src="template/header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="278" gutter="0" styleClass="menuArea">
<ui:include src="template/menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" gutter="0" styleClass="contentArea">
<h:panelGroup id="contentAreaPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:panelGroup>
</p:layoutUnit>
<p:layoutUnit position="south" size="47" gutter="0" styleClass="footerArea">
<p:outputPanel styleClass="copyright">Copyright © Arbitrage Online, 2014. All rights reserved.</p:outputPanel>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
menu.html：
menu.html:
<ui:composition
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:form id="menuForm">
<p:menu style="width:100%;" styleClass="leftMenu">
<p:menuitem value="Overview" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/overview')}" styleClass="ui-state-active" style="border-top: none !important;" icon="ui-icon-home24" update=":contentAreaPanel"/>
<p:menuitem value="Add Items" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/addAmazonItems')}" icon="ui-icon-home" update=":contentAreaPanel"/>
<p:menuitem value="Manage Items" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/manageAmazon')}" icon="ui-icon-disk" update=":contentAreaPanel"/>
<p:menuitem value="View eBay Results" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/manageEbay')}" icon="ui-icon-home" update=":contentAreaPanel"/>
<p:menuitem value="Manage Snipes" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/overview')}" icon="ui-icon-home" update=":contentAreaPanel"/>
<p:menuitem value="Manage Excludes" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" icon="ui-icon-home" update=":contentAreaPanel" />
<p:menuitem value="Submit a Ticket" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" icon="ui-icon-home" update=":contentAreaPanel" />
<p:menuitem value="View Tutorials" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" style="border-bottom: none !important;" icon="ui-icon-home" update=":contentAreaPanel" />
</p:menu>
</h:form>
</ui:composition>
它不工作的特定页面（manageAmazon.xhtml）：
The Specific page it is not working on (manageAmazon.xhtml):
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:form id="amazonItemForm" onreset="#{amazonTableBean.populateTableItems()}" >
<h:outputText value="Manage Amazon Products" styleClass="addItemsTitle" />
<h:panelGroup id="manageAmazonPanel" layout="block" styleClass="manageAmazonTablePanel" >
<p:dataTable var="amazonItem" value="#{manageItemsBean.amazonItemList}" scrollHeight="700" scrollable="true" styleClass="manageAmazonTable" rowExpandMode="single" widgetVar="manageAmazonWidget">
<p:column style="width:16px" styleClass="rowToggle">
<p:rowToggler />
</p:column>
<p:column headerText="Product Identifier" sortBy="#{amazonItem.itemASIN}" filterBy="#{amazonItem.itemASIN}" filterMatchMode="contains" >
<h:outputText value="#{amazonItem.itemASIN}" />
</p:column>
<p:column headerText="Product Name" sortBy="#{amazonItem.itemName}" filterBy="#{amazonItem.itemName}" filterMatchMode="contains" colspan="3">
<h:outputText value="#{amazonItem.itemName}"/>
</p:column>
<p:column headerText="Product Rank" sortBy="#{amazonItem.itemRank}">
<h:outputText value="#{amazonItem.itemRank}"/>
</p:column>
<p:column headerText="New Price" sortBy="#{amazonItem.newPrice}">
<h:outputText value="$#{amazonItem.newPrice}"/>
</p:column>
<p:column headerText="Used Price" sortBy="#{amazonItem.usedPrice}">
<h:outputText value="$#{amazonItem.usedPrice}"/>
</p:column>
<p:column headerText="Collectible Price" sortBy="#{amazonItem.collPrice}">
<h:outputText value="$#{amazonItem.collPrice}"/>
</p:column>
<p:rowExpansion>
<p:outputPanel deferred="true" layout="block" styleClass="singleItemPanel">
<h:panelGroup layout="block" styleClass="singleItemName">
<p:inplace id="nameInplace" editor="true" styleClass="singleItemNameContent" >
<p:inputText value="#{amazonItem.itemName}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'name')}" update="nameInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemImage">
<h:graphicImage value="#{amazonItem.imageUrl}" styleClass="singleItemImageContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemId">
<h:outputText value="Product ID: #{amazonItem.itemASIN}" styleClass="singleItemIdContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemRank">
<h:outputText value="Product Rank: #{amazonItem.itemRank}" styleClass="singleItemRankContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemNewPrice">
<h:outputText value="New Price: " styleClass="singleItemRankContent"/>
<h:outputText value="$#{amazonItem.newPrice}" styleClass="singleItemNewPriceContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemUsedPrice">
<h:outputText value="Used Price: " styleClass="singleItemRankContent"/>
<h:outputText value="$#{amazonItem.usedPrice}" styleClass="singleItemUsedPriceContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemCollPrice">
<h:outputText value="Collectible Price: " styleClass="singleItemRankContent"/>
<h:outputText value="$#{amazonItem.collPrice}" styleClass="singleItemCollPriceContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemMaxBids">
<h:outputText value="Max Bids: " styleClass="singleItemRankContent"/>
<p:inplace id="bidsInplace" editor="true" styleClass="singleItemMaxBidsContent">
<p:inputText value="#{amazonItem.maxBids}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'bids')}" update="bidsInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemNetProfits">
<h:outputText value="Net Profits (%): " styleClass="singleItemRankContent"/>
<p:inplace id="profitsInplace" editor="true" styleClass="singleItemNetProfitsContent" >
<p:inputText value="#{amazonItem.netProfits}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'profits')}" update="profitsInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemInclude">
<h:outputText value="Include Keywords: " styleClass="singleItemRankContent"/>
<p:inplace id="includeInplace" editor="true" styleClass="singleItemIncludeContent" >
<p:inputText value="#{amazonItem.includeKeywords}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'include')}" update="includeInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemExclude">
<h:outputText value="Exclude Keywords: " styleClass="singleItemRankContent"/>
<p:inplace id="excludeInplace" editor="true" styleClass="singleItemExcludeContent">
<p:inputText value="#{amazonItem.excludeKeywords}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'exclude')}" update="excludeInplace"/>
</p:inplace>
</h:panelGroup>
</p:outputPanel>
<p:chart type="line" model="#{manageItemsBean.createAmazonPriceChart(amazonItem)}"/>
</p:rowExpansion>
</p:dataTable>
</h:panelGroup>
</h:form>
</ui:composition>
一个随机页面（overview.xhtml）。我改变了图表的代码，以测试它在这个页面上，因为这个页面没有（amazonItem）。这样，图表在此页面上工作，但仍在其他页面上产生相同的问题：
A random page it works on (overview.xhtml). I changed the code of the chart a bit to test it on this page because this page does not have an (amazonItem). Doing this the chart worked on this page, but it still produced the same problem on the other page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
</ui:composition>
推荐答案
这是由原始网页不包含图表。只加载基本的加载js，这不包括图表js。所以当你动态改变包含它不加载。在这种情况下手动添加它解决问题
This is caused by the original page not including a chart. Only the base primefaces js is loaded than, which does not include the chart js. So when you dynamically change the include it is not loaded. In that case adding it manually solves the issue
< link rel =stylesheethref =/ javax.faces.resource / charts / charts.css.jsf？ln = primefaces/>
< h：outputScript library =primfacesname =charts / charts.js/>
Actualy这是当我的应用程序开始为当前显示的页面，而不是当我有新的页面，一旦应用程序运行时加载。
希望有帮助。
Actualy this was loaded when my application start for the current displayed page but not when i had new page once the application was running. Hope this help.
这篇关于LineChart不渲染为Primefaces 5.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
