如何将p：chart类型“line”导出为png或jpg文件？

Question

我很抱歉我的英语水平，但我有一个问题已经持续超过3天没有找到任何答案。我的问题是如何导出为图像（png o jpg文件）p：图表类型“行”，我正在使用JSF 2.1和primefaces 5.3。 我把代码留在这里......

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:pe="http://primefaces.org/ui/extensions"
                template="/plantillas/templateHistComp.xhtml">

    <ui:define name="content">
        <f:metadata>
            <f:viewParam name="dmy" />
            <f:event listener="#{InfoHistMB.init}" type="preRenderView" />
        </f:metadata>
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
                <meta name="apple-mobile-web-app-capable" content="yes" />
            </f:facet>
            <title>::INFOAIRE::</title>
            <h:outputScript name="js/layout.js" />
            <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnKoDxm56hN4vhtkWuJdnSfejjJNc60Es"></script>
            <!--  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>-->

            <h:outputText value="&lt;!--[if gte IE 9]&gt;" escape="false" />
                <style type="text/css">
                    /* styles for IE 9 */
                </style>
            <h:outputText value="&lt;![endif]--&gt;" escape="false" />  
            <ui:insert name="head" />
            <h:outputStylesheet name="grid/grid.css" library="primefaces" />
        </h:head>

        <h:body id="bodyInfHist">
        <h:outputScript library="jqplot-plugin" name="jqplot.canvasOverlay.min.js" target="head" />
        <!--  <h:outputScript library="js" name="extra_config.js" target="head" /> -->
        <f:view>
            <h:form id="formInfoHist">

                <p:breadCrumb style="margin:0 auto;">
                    <p:menuitem value="Inicio" url="#" />
                    <p:menuitem value="Info Aire" outcome="/InformacionHistorica.xhtml"/>
                    <p:menuitem value="Historica-Comparativa" outcome="/InfoHistComparativa.xhtml"/>
                    <p:menuitem value="Historica-Detalle" outcome="/InfoHistDetalle.xhtml"/>
                </p:breadCrumb> 

                <div class="ui-fluid">
                    <!-- <p:messages id="messages" showDetail="true" autoUpdate="false" closable="true" /> -->
                    <p:panelGrid columns="6" columnClasses="ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
                        <p:outputLabel  value="Departamento:"/>
                        <p:selectOneMenu id="departamentoBusqueda" value="#{InfoHistMB.departamento}" required="true" requiredMessage="Departamento es requerido!">
                            <p:ajax event="change" listener="#{InfoHistMB.onDepartamentChange}" 
                                    update="provinciaBusqueda,distritoBusqueda,estacionBusqueda"></p:ajax>
                            <f:selectItem itemLabel="Seleccione" itemValue="#{null}"/>
                            <f:selectItems value="#{InfoHistMB.listaDepartamento}" var="ld" id="listaDepartamentos" 
                                    itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoDepa}"/>                  
                        </p:selectOneMenu>

                        <p:outputLabel  value="Provincia:"/>
                        <p:selectOneMenu id="provinciaBusqueda" value="#{InfoHistMB.provincia}">
                            <p:ajax event="change" listener="#{InfoHistMB.onProvinciaChange}"
                                    inmediate="true" process="@form" update="distritoBusqueda,estacionBusqueda"></p:ajax>   
                            <f:selectItem itemLabel="Seleccionar" itemValue="00" />
                            <f:selectItems value="#{InfoHistMB.listaProvincia}" var="ld" id="listaProvincias" 
                                    itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoProv}"/>                  
                        </p:selectOneMenu>

                        <p:outputLabel  value="Distrito:"/>
                        <p:selectOneMenu id="distritoBusqueda" value="#{InfoHistMB.district}">
                            <p:ajax event="change" listener="#{InfoHistMB.onDistritoChange}"
                                    inmediate="true" process="@form" update="estacionBusqueda"></p:ajax>
                            <f:selectItem itemLabel="Seleccionar" itemValue="00"/>
                            <f:selectItems value="#{InfoHistMB.listaDistrito}" var="ld" id="listaDistritos"
                                    itemLabel="#{ld.vDescripcion}" itemValue="#{ld.vCodigoDist}"/>
                        </p:selectOneMenu>

                        <p:outputLabel  value="Estación:"/>
                        <p:selectOneMenu id="estacionBusqueda" value="#{InfoHistMB.estacion}">
                            <f:selectItem itemLabel="Seleccione" itemValue="0" />
                            <f:selectItems value="#{InfoHistMB.listaEstacion}" var="ld" id="listaEstaciones"
                                    itemLabel="#{ld.vNombreEstacion}" itemValue="#{ld.idEstacion}"/>
                        </p:selectOneMenu>  

                        <p:outputLabel value="Periodo de medición:"/>
                        <p:selectOneMenu id="periodoMedicion" value="#{InfoHistMB.idPeriodoMed}">
                            <p:ajax event="change" listener="#{InfoHistMB.onPeriodoMedChange}"
                                    inmediate="true" process="@form" update="parametro,finit"></p:ajax>
                            <f:selectItems value="#{InfoHistMB.listaPeriodoMed}" var="ld" id="listaPeriodoMed" 
                                    itemLabel="#{ld.vDescripcion}" itemValue="#{ld.idElemento}"/>
                        </p:selectOneMenu>

                        <p:outputLabel  value="Fuente:"/>
                        <p:selectOneMenu id="fuente" value="#{InfoHistMB.idEntidadFuente}">
                            <f:selectItem itemLabel="Seleccione" itemValue="0" />
                            <f:selectItems value="#{InfoHistMB.listaFuente}" var="ld" id="listaFuente"
                                    itemLabel="#{ld.vDescripcion}" itemValue="#{ld.idEntidad}"/>
                        </p:selectOneMenu>

                        <p:outputLabel  value="Parametro:"/>
                        <p:selectOneMenu id="parametro" value="#{InfoHistMB.idParametro}">
                            <f:selectItem itemLabel="Seleccione" itemValue="0" />
                            <f:selectItems value="#{InfoHistMB.listaParametro}" var="ld" id="listaParametro"
                                    itemLabel="#{ld.vNombreParametro}" itemValue="#{ld.idParametro}"/>
                        </p:selectOneMenu>

                        <p:outputLabel  value="Fecha inicio:"/>
                        <p:calendar value="#{InfoHistMB.ffinit}" id="finit" disabled="#{InfoHistMB.enableFecha}" effect="fold" pattern="yyyy-MM-dd" requiredMessage="Fecha es requerida!"></p:calendar>

                        <p:outputLabel  value="Fecha fin:"/>
                        <p:calendar value="#{InfoHistMB.ffin}" id="fend" effect="fold" pattern="yyyy-MM-dd" requiredMessage="Fecha es requerida!" ></p:calendar>

                    </p:panelGrid>
                    <div id="buscar" align="right" style="width:100%;">
                        <p:commandButton value="Buscar" id="buscar" actionListener="#{InfoHistMB.updateTable}" process="@form" inmediate="true" update="tablaResultados,EstacionMarker" icon="ui-icon-search" style="margin: 15px 10px; width:100px;">

                        </p:commandButton>
                    </div>

                </div>

                <div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
                    <div class="ui-grid-row">
                        <div class="ui-grid-col-6" style="padding:10px 10px 0px 5px;">
                            <f:view contentType="text/html">
                                <p:gmap id="EstacionMarker" center="-12.046374, -77.042793" zoom="10" type="HYBRID"  model="#{InfoHistMB.simpleModel}" style="width:100%;height:450px" />                           
                            </f:view>
                        </div>
                        <div class="ui-grid-col-6" style="padding: 0px 5px;">
                            <h3 style="color:#9B9995; padding:5px 5px;font-size: 1.5em;" >
                            Resultados Obtenidos</h3>
                            <p:dataTable id="tablaResultados" var="resultado" value="#{InfoHistMB.listaElementosTabla}" reflow="true" rows="5" paginator="true" tableStyle="width:auto" >

                                <p:column headerText="Ubigeo">
                                    <h:outputText value="#{resultado.departamento}" />
                                </p:column>

                                <p:column headerText="Estaciones">
                                    <h:outputText value="#{resultado.estaciones}"/>
                                </p:column>

                                <p:column headerText="Parámetros">
                                    <h:outputText value="#{resultado.parametros}" />
                                </p:column>

                                <p:column headerText="Fecha inicio">
                                    <h:outputText value="#{resultado.fechaInit}" />
                                </p:column>

                                <p:column headerText="Fecha fin">
                                    <h:outputText value="#{resultado.fechaFin}" />
                                </p:column>

                                <p:column id="columnVer" headerText="Ver ">
                                    <p:commandButton id="ver" value="Ver" actionListener="#{InfoHistMB.updateGraficolinear(resultado)}" process="@form" inmediate="true" update="formInfoHist:graficoLineal,formInfoHist:exEca,formInfoHist:exNoEca" icon="ui-icon-extlink" />
                                </p:column>
                            </p:dataTable>
                        </div>
                    </div>
                </div>

                <div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
                    <div class="ui-grid-row">
                        <div class="ui-grid-col-12">
                            <h2 style="padding:15px 0px; text-transform: capitalize; text-align: center;  font-family: Arial, Helvetica, sans-serif;">
                            Comparativo entre el resultado de la búsqueda y el estandar de calidad ambiental</h2>
                        </div>
                    </div>
                </div>

                <div class="ui-grid ui-grid-responsive" style="border: 2px solid #E7E5E0;border-radius: 5px;">
                    <div class="ui-grid-row">
                        <div class="ui-grid-col-9">

                            <p:chart id ="graficoLineal" type="line" model="#{InfoHistMB.lineModel2}" widgetVar="chartLineal" style="width:100%;height:350px;margin:20px 0" responsive="true"/>

                        </div>
                        <div class="ui-grid-col-3">
                            <div class="ui-grid ui-grid-responsive">
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-12">
                                    <hr style="height: 1px;background-color: #4278D5;"/>
                                </div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-12">
                                    <p:panelGrid columns="2" columnClasses="ui-grid-col-10,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
                                        <h:outputText value="Nº de veces que se excedió el estandar de calidad ambiental " /> 
                                        <h:outputText id="exEca" value="#{InfoHistMB.excedeEca}" ></h:outputText>
                                    </p:panelGrid>
                                </div>  
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-12">
                                    <hr style="height: 2px;background-color: #4278D5;"/>
                                </div>
                            </div>
                            <div class="ui-grid-row">   
                                <div class="ui-grid-col-12">     
                                    <p:panelGrid columns="2" columnClasses="ui-grid-col-10,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank">
                                        <h:outputText value="Nº de veces que no se excedió el estandar de calidad ambiental " /> 
                                        <h:outputText id="exNoEca" value="#{InfoHistMB.noExcedeEca}" ></h:outputText>
                                    </p:panelGrid>
                                </div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-12">
                                    <hr style="height: 1px;background-color: #4278D5;"/>
                                </div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-12" align="center">

                                </div>
                            </div>
                        </div>                      
                        </div>
                    </div>
                </div>


            </h:form>
            <script type="text/javascript">
                function chartExtender() {
                    this.cfg.seriesDefaults.rendererOptions.varyBarColor = true; 
                }
            </script>   
        </f:view>
        </h:body>

    </ui:define>

</ui:composition>

这正是p：chart ...

的一部分

<div class="ui-grid-col-9">

                            <p:chart id ="graficoLineal" type="line" model="#{InfoHistMB.lineModel2}" widgetVar="chartLineal" style="width:100%;height:350px;margin:20px 0" responsive="true"/> 
                        </div>

我从数据库动态生成图表，但我没有遇到任何问题。我使用了primefaces页面的例子，但没有任何结果。

Answer 1

Primefaces提供客户端方法将图表转换为可下载的图像

以下是来自primefaces参考指南的示例

<p:chart type="line" model="#{bean.model}" style="width:500px;
   height:300px" widgetVar="chart"/>
<p:commandButton type="button" value="Export" icon="ui-icon-extlink"
   onclick="exportChart()"/>

<p:dialog widgetVar="dlg" showEffect="fade" modal="true" 
   header="Chart as an Image">
   <p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>
</p:dialog>

function exportChart() {
    //export image
    $('#output').empty().append(PF('chart').exportAsImage());
    //show the dialog
    PF('dlg').show();
}