p:chart将所有图表渲染为Linechart

时间:2016-06-11 13:03:08

标签: jsf primefaces charts

我有一个使用PrimeFaces 6.0的JSF Java应用程序 DeviceManager是一个bean,其中包含联机,脱机和阻止设备的列表。每个设备在班级中都有2个图表模型,Dial和Line。以下是相关的代码部分

<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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:head>
    <title><ui:insert name="title">Title</ui:insert></title>
    <h:outputStylesheet library="css" name="primeui-all.min.css" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />
    <h:outputStylesheet library="css" name="jquery.jqplot.min.css" />
    <h:outputScript library="js" name="primeui-all.min.js" />
    <h:outputScript library="js" name="jquery.jqplot.min.js"/>
</h:head>



<p:dataTable id="OnlineDevices" var="device" value="#{DeviceManager.online}">
    <p:column headerText="Gauge Meter" class="col-md-4" >
            <p:panel>
                <p:chart type="metergauge" model="#{device.dial}" style="height:300px;"/>
            </p:panel>
    </p:column>
</p:dataTable> 

这是包含图表模型的设备类,该图表模型是从Primefaces展示中复制的,用于消除模型中的任何问题

private MeterGaugeChartModel Dial;
public MeterGaugeChartModel getDial()
{
    Dial = initMeterGaugeModel();
    Dial.setTitle("Device Dial");
    Dial.setGaugeLabel("°C");
    Dial.setSeriesColors("66cc66,93b75f,E7E658,cc6666");
    Dial.setGaugeLabelPosition("bottom");
    Dial.setShowTickLabels(false);
    Dial.setLabelHeightAdjust(110);
    Dial.setIntervalOuterRadius(100);
    return Dial;

}

private MeterGaugeChartModel initMeterGaugeModel() 
{
    List<Number> intervals = new ArrayList<Number>()
    {   
        private static final long serialVersionUID = -311244463402628794L;

    {
        add(20);
        add(50);
        add(120);
        add(220);
    }};

    return new MeterGaugeChartModel(140, intervals);
}

现在这个工作和图表,只有所有图表都呈现为空线图。折线图正常工作和绘图,但其他所有内容都呈现为空行图。我使用了一个轮询表来更新图表数据,并使用从服务器发送的数据检查的firebug,它表示类型metergauge。那么为什么要渲染(以及其他所有内容)呢?非常感谢大家和所有建议表示赞赏和欢迎。

1 个答案:

答案 0 :(得分:1)

所有自动包含的曲面js(包括图表的jqplot)与手动包含的jqplot和primeui css以及js之间存在冲突。删除它,它只会工作。