动态创建Primefaces折线图会产生JS'意外标识符'错误而没有图表

时间:2015-09-11 18:42:55

标签: javascript jsf primefaces charts

我正在编写一个测试应用程序,该应用程序允许用户使用相同的动态生成的数据创建条形图和折线图。条形图已成功创建,但折线图会生成空白页。到目前为止,它看起来像一个javascript / jqplot问题。我检查了以下可能的原因:

1)Java方法的准确性

用于创建折线图的bean方法:

public LineChartModel lineModelMethod() {
    ChartSeries series1 = new ChartSeries();
    series1Name = "Series 1";
    series1List = facade.chartQuery(idmid, series1Name);
    for (Itemdatapoint t : series1List) {
        series1.set(t.getPointdate(), t.getActualnum());
    }

    ChartSeries series2 = new ChartSeries();

    series2Name = "Series 2";
    series2List = facade.chartQuery(idmid, series2Name);
    for (Itemdatapoint t : series2List) {
        series2.set(t.getPointdate(), t.getActualnum());
    }

    lineModel = new LineChartModel();
    lineModel.addSeries(series1);

    if (series2List != null) {
        lineModel.addSeries(series2);
    }
    lineModel.setSeriesColors("FF0000");
    lineModel.setAnimate(true);

    return lineModel;
}

使用与上述完全相同的方法成功生成条形图(通过使用BarChartModel而不是LineChartModel)。

2)JSF和EL语法

我使用JSF模板,调用bean的JSF页面是:

<h:form>
    <h:inputHidden value="#{dataBean.recid}"/>
    <p:chart type="line" model="#{chartBeanMaster.lineModel}"/>
</h:form>

3)基础javascript / jquery

在浏览器控制台中,我遇到语法错误&#39; Unexpected Identifier&#39;。它所指的行是:

<div id="j_idt30:j_idt31"></div>
<script id="j_idt30:j_idt31_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_j_idt30_j_idt31',{id:'j_idt30:j_idt31',type:'line',data:[[[Thu Jan 01 00:00:00 PST 2015,270],[Mon Jun 01 00:00:00 PDT 2015,290],[Sat Aug 01 00:00:00 PDT 2015,320],[Tue Sep 01 00:00:00 PDT 2015,310]],[[Thu Jan 01 00:00:00 PST 2015,210],[Mon Jun 01 00:00:00 PDT 2015,215],[Tue Sep 01 00:00:00 PDT 2015,250],[Sat Aug 01 00:00:00 PDT 2015,250]],[],[]],seriesColors:['#FF0001'],axes:{xaxis: {label:'',renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:"0"}},yaxis: {label:'',renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:"0"}}},series:[{label:'null',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'null',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'null',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'null',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],animate:true,datatip:true},'charts');});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-4855814929379738627:5735212027105379706" autocomplete="off" />

我可以清楚地看到数据正在导入折线图模型,但无法从此错误消息中准确地看出语法错误的位置。

如果p:图表在jsf页面中用p:tabbedView标签包装,但错误消失,但仍然没有图表出现!

回应Dijana的评论以及我对类似问题的研究,我试图在页面中包含相关的JS脚本。

<h:outputStylesheet library="primefaces" name="charts/charts.css"/>
<h:outputScript library="primefaces" name="charts/charts.js"/>

这会导致相同的错误,但是在其他情况下它也会给出一个未定义的jQuery&#39;错误。所以我导入了所有必要的文件:

<h:outputScript name="jquery/jquery.js" library="primefaces"/>
<h:outputScript name="jquery/jquery-plugins.js" library="primefaces"/>
<h:outputScript name="primefaces.js" library="primefaces"/>
<h:outputScript name="charts/charts.js" library="primefaces"/>
<h:outputStylesheet name="charts/charts.css" library="primefaces"/>

这让我回到了同样的错误:

未捕获的Sytax错误:意外的标识符

起初我认为这是PF无法导入JS脚本,但如果我包含或删除上面的手动导入,我仍然会得到相同的错误。这使我认为问题可能是生成的脚本或PF库中的错误。

为了消除有缺陷的PF库的可能性,我将库升级到PF 5.2。我还删除了我的服务器缓存,Web缓存并重新启动。什么!

我怀疑问题出在潜在的JS上,但不确定从何处开始。 PF在动态创建折线图时是否有错误?谁能提出一个如何成功实现这个目标的例子?有关导致语法错误的原因的任何指导?谢谢!

更新 响应BalusC的评论,以下是HTML <head>标签的生成内容,似乎只包含一个JS库:

<link type="text/css" rel="stylesheet" href="/GModule/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/GModule/javax.faces.resource/charts/charts.css.xhtml?ln=primefaces&amp;v=5.2" />
<link type="text/css" rel="stylesheet" href="/GModule/javax.faces.resource/./css/default.css.xhtml" />
<link type="text/css" rel="stylesheet" href="/GModule/javax.faces.resource/./css/cssLayout.css.xhtml" />
<link type="text/css" rel="stylesheet" href="/GModule/javax.faces.resource/primefaces.css.xhtml? ln=primefaces&amp;v=5.2" />
<script type="text/javascript" src="/GModule/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.2"></script>
<script type="text/javascript" src="/GModule/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.2"></script>
<script type="text/javascript" src="/GModule/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.2"></script>
<script type="text/javascript" src="/GModule/javax.faces.resource/charts/charts.js.xhtml?ln=primefaces&amp;v=5.2"></script>
<script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.projectStage='Development';}</script>

0 个答案:

没有答案