primefaces - 如何在primefaces上添加辅助y轴

Question

如何在 primefaces 3.4 上创建辅助 y 轴？我已经阅读了 primefaces 手册 e googleed out there

谷歌告诉y2axis（来自jqplot）是这样的，但primefaces手册根本没有提到y2axis

我的课

package br.com.inmetrics.managedbean;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.LineChartSeries;
import javax.faces.event.ComponentSystemEvent;
import br.com.inmetrics.entity.Grafico;
import javax.faces.event.AbortProcessingException;
import br.com.inmetrics.dao.SistemaDAO;

@ManagedBean(name = "chartMB")
@SessionScoped
public class ChartManagedBean implements Serializable {

    private static final long serialVersionUID = 1L;
    private SistemaDAO apoioDao = new SistemaDAO();
    private List<Grafico> graficos = new ArrayList<Grafico>();
    private CartesianChartModel categoryModel;
    private CartesianChartModel linearModel;
    private String sistema;
    private String hostname;
    private String metrica;
    private String alinhamento;
    private String funcao;
    private int maximo;

    public ChartManagedBean() {
    }

    public CartesianChartModel getCategoryModel() {
        return categoryModel;
    }

    public CartesianChartModel getLinearModel() {
        return linearModel;
    }

    private void createLinearModel() {
        try {
            graficos = apoioDao.getGrafico(hostname, metrica);
        } catch (Exception ex) {
            ex.printStackTrace();
        }

        linearModel = new CartesianChartModel();
        LineChartSeries series1 = new LineChartSeries();
        this.alinhamento = metrica.equalsIgnoreCase("GBL_LOADAVG") ? "ne" : "e";
        this.funcao = metrica.equalsIgnoreCase("GBL_LOADAVG") ? "ext2" : "ext1";
        this.maximo = metrica.equalsIgnoreCase("GBL_LOADAVG") ? 1 : 100;
        series1.setLabel(metrica);

        for (Grafico s : graficos) {
            series1.set(s.getData(), s.getValor());
        }

        LineChartSeries series2 = new LineChartSeries();
        series2.setLabel("Threshold");
        series2.setMarkerStyle("filledSquare");

        for (Grafico t : graficos) {
            series2.set(t.getData(), metrica.equalsIgnoreCase("GBL_LOADAVG") ? 0.48 : 80);
        }

        //teste
        LineChartSeries series3 = new LineChartSeries();
        series3.setLabel("Threshold");
        series3.setMarkerStyle("filledSquare");

        for (Grafico t : graficos) {
            series3.set(t.getData(), metrica.equalsIgnoreCase("GBL_LOADAVG") ? 0.48 : 90);
        }

        linearModel.addSeries(series1);
        linearModel.addSeries(series2);

        //teste
        linearModel.addSeries(series3);
    }

    public String getSistema() {
        return sistema;
    }

    public void setSistema(String sistema) {
        this.sistema = sistema;
    }

    public String getHostname() {
        return hostname;
    }

    public void setHostname(String hostname) {
        this.hostname = hostname;
    }

    public String getMetrica() {
        return metrica;
    }

    public void setMetrica(String metrica) {
        this.metrica = metrica;
    }

    public void push(ComponentSystemEvent evt) throws AbortProcessingException {
        createLinearModel();
    }

    public String getAlinhamento() {
        return alinhamento;
    }

    public void setAlinhamento(String alinhamento) {
        this.alinhamento = alinhamento;
    }

    public int getMaximo() {
        return maximo;
    }

    public void setMaximo(int maximo) {
        this.maximo = maximo;
    }

    public String getFuncao() {
        return funcao;
    }

    public void setFuncao(String funcao) {
        this.funcao = funcao;
    }
}

我的 xhtml：

    <h:head>
        <link rel="shortcut icon" href="images/ico.ico" />
        <title>Capacity - Dashboard</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </h:head>
    <h:body>
        <h:form>
            <script type="text/javascript">
                function ext1() {
                    this.cfg.axes.yaxis.tickOptions = {
                        formatString : '%d\%'
                     };
                }

                function ext2() {
                    this.cfg.axes.yaxis.tickOptions = {
                        formatString : '%.2f'
                    };
                }
            </script>

            <div id="externa_corpo">
                <div id="corpo">
                    <div id="logo">
                        <img src="images/pt/logo.png" width="200" height="74" />
                    </div>

                    <!--logo-->
                    <div id="titulo-book">
                        Dashboard <br />
                    </div>
                    <div id="logo-cliente">
                        <img src="images/logoTIM.jpg" width="122" height="53" />
                    </div>

                    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
                    <p:lineChart id="linear" value="#{chartMB.linearModel}"
                                 legendPosition="#{chartMB.alinhamento}"
                                 title="#{chartMB.hostname} - P90" minY="0" maxY="#{chartMB.maximo}"
                                 style="height:450px" animate="true" xaxisAngle="270"
                                 seriesColors="FFFF00, FF0000" extender="#{chartMB.funcao}" showMarkers="true"
                                 zoom="false" />

                    <f:metadata>
                        <f:viewParam name="sistema" value="#{chartMB.sistema}" />
                        <f:viewParam name="hostname" value="#{chartMB.hostname}" />
                        <f:viewParam name="metrica" value="#{chartMB.metrica}" />
                        <f:event type="preRenderView" listener="#{chartMB.push}" />
                    </f:metadata>
                </div>
            </div>
        </h:form>
    </h:body>
</html>

亲切的问候和最良好的祝愿，

杰拉尔多·内托