如何将p：图表类型“行”导出为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的部分：图...

<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(); 
}